diff --git a/ui/app/components/chart-primitives/area.js b/ui/app/components/chart-primitives/area.js
index 07d02de1e..c8e033ae6 100644
--- a/ui/app/components/chart-primitives/area.js
+++ b/ui/app/components/chart-primitives/area.js
@@ -5,7 +5,10 @@ import uniquely from 'nomad-ui/utils/properties/uniquely';
 
 export default class ChartPrimitiveArea extends Component {
   get colorClass() {
-    return this.args.colorClass || `${this.args.colorScale}-${this.args.index}`;
+    if (this.args.colorClass) return this.args.colorClass;
+    if (this.args.colorScale && this.args.index != null)
+      return `${this.args.colorScale} ${this.args.colorScale}-${this.args.index + 1}`;
+    return 'is-primary';
   }
 
   @uniquely('area-mask') maskId;
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index 5c4843a3b..1ec523bbf 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -18,7 +18,6 @@
     {{#if this.ready}}
       {{yield (hash
         Area=(component "chart-primitives/area"
-          colorClass=this.chartClass
           curve="linear"
           xScale=this.xScale
           yScale=this.yScale
diff --git a/ui/stories/charts/line-chart.stories.js b/ui/stories/charts/line-chart.stories.js
index 0632c30cc..be79e4fcf 100644
--- a/ui/stories/charts/line-chart.stories.js
+++ b/ui/stories/charts/line-chart.stories.js
@@ -49,9 +49,9 @@ export let Standard = () => {
       </div>
       <div class="block" style="height:100px; width: 400px;">
         {{#if this.lineChartMild}}
-          <LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value" @chartClass="is-info">
+          <LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value">
             <:svg as |c|>
-              <c.Area @data={{this.lineChartMild}} />
+              <c.Area @data={{this.lineChartMild}} @colorClass="is-info" />
             </:svg>
           </LineChart>
         {{/if}}
@@ -70,18 +70,18 @@ export let FluidWidth = () => {
       <h5 class="title is-5">Fluid-width Line Chart</h5>
       <div class="block" style="height:250px;">
         {{#if this.lineChartData}}
-          <LineChart @data={{this.lineChartData}} @xProp="year" @yProp="value" @chartClass="is-danger">
+          <LineChart @data={{this.lineChartData}} @xProp="year" @yProp="value">
             <:svg as |c|>
-              <c.Area @data={{this.lineChartData}} />
+              <c.Area @data={{this.lineChartData}} @colorClass="is-danger" />
             </:svg>
           </LineChart>
         {{/if}}
       </div>
       <div class="block" style="height:250px;">
         {{#if this.lineChartMild}}
-          <LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value" @chartClass="is-warning">
+          <LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value">
             <:svg as |c|>
-              <c.Area @data={{this.lineChartMild}} />
+              <c.Area @data={{this.lineChartMild}} @colorClass="is-warning" />
             </:svg>
           </LineChart>
         {{/if}}
@@ -106,7 +106,6 @@ export let LiveData = () => {
             @xProp="ts"
             @yProp="val"
             @timeseries={{true}}
-            @chartClass="is-primary"
             @xFormat={{this.controller.secondsFormat}}>
             <:svg as |c|>
               <c.Area @data={{this.controller.lineChartLive}} />
@@ -152,7 +151,7 @@ export let Gaps = () => {
       <h5 class="title is-5">Line Chart data with gaps</h5>
       <div class="block" style="height:250px">
         {{#if this.lineChartGapData}}
-          <LineChart @data={{this.lineChartGapData}} @xProp="year" @yProp="value" @chartClass="is-primary">
+          <LineChart @data={{this.lineChartGapData}} @xProp="year" @yProp="value">
             <:svg as |c|>
               <c.Area @data={{this.lineChartGapData}} />
             </:svg>