diff --git a/src/components/chartArea/__tests__/chartArea.test.js b/src/components/chartArea/__tests__/chartArea.test.js
index 887901ff3..7a6e9ab28 100644
--- a/src/components/chartArea/__tests__/chartArea.test.js
+++ b/src/components/chartArea/__tests__/chartArea.test.js
@@ -30,7 +30,8 @@ describe('ChartArea Component', () => {
               yAxisLabel: '2 y axis label'
             }
           ],
-          dataLegendLabel: 'Arma virumque cano'
+          legendLabel: 'Arma virumque cano',
+          isStacked: true
         }
       ]
     };
@@ -58,8 +59,13 @@ describe('ChartArea Component', () => {
               xAxisLabel: '2 x axis label'
             }
           ],
-          dataLegendLabel: 'Arma virumque cano',
-          thresholdLegendLabel: 'Arma virumque cano'
+          legendLabel: 'Arma virumque cano',
+          isStacked: true
+        },
+        {
+          data: [],
+          legendLabel: 'Arma virumque cano',
+          isThreshold: true
         }
       ]
     };
@@ -93,8 +99,8 @@ describe('ChartArea Component', () => {
               xAxisLabel: '2 x axis label'
             }
           ],
-          dataLegendLabel: 'Arma virumque cano',
-          thresholdLegendLabel: 'Arma virumque cano'
+          legendLabel: 'Arma virumque cano',
+          isStacked: true
         }
       ]
     };
@@ -125,7 +131,11 @@ describe('ChartArea Component', () => {
               xAxisLabel: '2 x axis label'
             }
           ],
-          threshold: [
+          legendLabel: 'Arma virumque cano',
+          isStacked: true
+        },
+        {
+          data: [
             {
               x: 1,
               y: 10,
@@ -139,8 +149,8 @@ describe('ChartArea Component', () => {
               xAxisLabel: '2 x axis label'
             }
           ],
-          dataLegendLabel: 'Arma virumque cano',
-          thresholdLegendLabel: 'Arma virumque cano'
+          legendLabel: 'Arma virumque cano',
+          isThreshold: true
         }
       ]
     };
@@ -161,7 +171,12 @@ describe('ChartArea Component', () => {
               xAxisLabel: '1 x axis label'
             }
           ],
-          threshold: [
+          interpolation: 'natural',
+          legendLabel: 'Arma virumque cano',
+          isStacked: true
+        },
+        {
+          data: [
             {
               x: 1,
               y: 10,
@@ -169,9 +184,8 @@ describe('ChartArea Component', () => {
               xAxisLabel: '1 x axis label'
             }
           ],
-          dataInterpolation: 'natural',
-          dataLegendLabel: 'Arma virumque cano',
-          thresholdLegendLabel: 'Arma virumque cano'
+          legendLabel: 'Arma virumque cano',
+          isThreshold: true
         }
       ]
     };
@@ -232,7 +246,7 @@ describe('ChartArea Component', () => {
             yAxisLabel: '1 hello world y-axis label'
           }
         ],
-        legendData: { name: 'Hello world' },
+        legendLabel: 'Hello world',
         xAxisLabelUseDataSet: true,
         yAxisLabelUseDataSet: true
       }
diff --git a/src/components/chartArea/chartArea.js b/src/components/chartArea/chartArea.js
index 3d7ff5bfe..9e82e5203 100644
--- a/src/components/chartArea/chartArea.js
+++ b/src/components/chartArea/chartArea.js
@@ -135,14 +135,10 @@ class ChartArea extends React.Component {
     let dataSetMaxY = 0;
 
     dataSets.forEach(dataSet => {
-      dataSetMaxX = dataSet.data.length > dataSetMaxX ? dataSet.data.length : dataSetMaxX;
+      if (dataSet.data) {
+        dataSetMaxX = dataSet.data.length > dataSetMaxX ? dataSet.data.length : dataSetMaxX;
 
-      dataSet.data.forEach(value => {
-        dataSetMaxY = value.y > dataSetMaxY ? value.y : dataSetMaxY;
-      });
-
-      if (dataSet.threshold) {
-        dataSet.threshold.forEach(value => {
+        dataSet.data.forEach(value => {
           dataSetMaxY = value.y > dataSetMaxY ? value.y : dataSetMaxY;
         });
       }
@@ -172,24 +168,18 @@ class ChartArea extends React.Component {
     const legendData = [];
 
     dataSets.forEach(dataSet => {
-      if (dataSet.dataLegendLabel) {
-        const legendDataSettings = { symbol: {}, name: dataSet.dataLegendLabel };
+      if (dataSet.legendLabel) {
+        const legendDataSettings = { symbol: {}, name: dataSet.legendLabel };
 
-        if (dataSet.dataColor) {
-          legendDataSettings.symbol.fill = dataSet.dataColor;
+        if (dataSet.isThreshold) {
+          legendDataSettings.symbol = { type: 'threshold' };
         }
 
-        legendData.push(legendDataSettings);
-      }
-
-      if (dataSet.thresholdLegendLabel) {
-        const legendThresholdSettings = { symbol: { type: 'threshold' }, name: dataSet.thresholdLegendLabel };
-
-        if (dataSet.thresholdColor) {
-          legendThresholdSettings.symbol.fill = dataSet.thresholdColor;
+        if (dataSet.color) {
+          legendDataSettings.symbol.fill = dataSet.color;
         }
 
-        legendData.push(legendThresholdSettings);
+        legendData.push(legendDataSettings);
       }
     });
 
@@ -201,9 +191,52 @@ class ChartArea extends React.Component {
     };
   }
 
+  renderChart({ stacked = false }) {
+    const { dataSets } = this.props;
+    const charts = [];
+    const chartsStacked = [];
+
+    const thresholdChart = dataSet => (
+      <ChartThreshold
+        animate={dataSet.animate || false}
+        interpolation={dataSet.interpolation || 'step'}
+        key={helpers.generateId()}
+        data={dataSet.data}
+        // FixMe: PFCharts inconsistent implementation around themeColor and style, see ChartArea. Appears enforced, see PFCharts. Leads to multiple checks and implementations.
+        themeColor={dataSet.color}
+        style={dataSet.style || {}}
+      />
+    );
+
+    const areaChart = dataSet => (
+      <PfChartArea
+        animate={dataSet.animate || false}
+        interpolation={dataSet.interpolation || 'catmullRom'}
+        key={helpers.generateId()}
+        data={dataSet.data}
+        // FixMe: PFCharts inconsistent implementation around themeColor and style, see ChartThreshold themeColor and style
+        style={{ data: { fill: dataSet.color }, ...dataSet.style }}
+      />
+    );
+
+    dataSets.forEach(dataSet => {
+      if (dataSet.data && dataSet.data.length) {
+        const updatedDataSet = (dataSet.isThreshold && thresholdChart(dataSet)) || areaChart(dataSet);
+
+        if (dataSet.isStacked) {
+          chartsStacked.push(updatedDataSet);
+        } else {
+          charts.push(updatedDataSet);
+        }
+      }
+    });
+
+    return (stacked && chartsStacked) || charts;
+  }
+
   render() {
     const { chartWidth } = this.state;
-    const { dataSets, padding } = this.props;
+    const { padding } = this.props;
 
     const { isXAxisTicks, isYAxisTicks, xAxisProps, yAxisProps } = this.getChartTicks();
     const { chartDomain, maxY } = this.getChartDomain({ isXAxisTicks, isYAxisTicks });
@@ -231,48 +264,18 @@ class ChartArea extends React.Component {
       );
     }
 
+    /**
+     * FixMe: PFCharts or Victory, unable to return null or empty content.
+     * General practice of returning "null" shouldn't necessarily melt the
+     * graph. To avoid issues we return an empty array
+     */
     return (
       <div ref={this.containerRef}>
         <Chart animate={{ duration: 0 }} width={chartWidth} {...chartProps}>
           <ChartAxis {...xAxisProps} animate={false} />
           <ChartAxis {...yAxisProps} animate={false} />
-          {(dataSets &&
-            dataSets.length &&
-            dataSets.map(
-              dataSet =>
-                (dataSet.threshold && dataSet.threshold.length && (
-                  <ChartThreshold
-                    animate={dataSet.thresholdAnimate || false}
-                    interpolation={dataSet.thresholdInterpolation || 'step'}
-                    key={helpers.generateId()}
-                    data={dataSet.threshold}
-                    // FixMe: PFCharts inconsistent implementation around themeColor and style, see ChartArea. Appears enforced, see PFCharts. Leads to multiple annoyance checks and implementations.
-                    themeColor={dataSet.thresholdColor}
-                    style={dataSet.thresholdStyle || {}}
-                  />
-                )) ||
-                null
-            )) ||
-            null}
-          <ChartStack>
-            {(dataSets &&
-              dataSets.length &&
-              dataSets.map(
-                dataSet =>
-                  (dataSet.data && dataSet.data.length && (
-                    <PfChartArea
-                      animate={dataSet.dataAnimate || false}
-                      interpolation={dataSet.dataInterpolation || 'catmullRom'}
-                      key={helpers.generateId()}
-                      data={dataSet.data}
-                      // FixMe: PFCharts inconsistent implementation around themeColor and style, see ChartThreshold themeColor and style
-                      style={{ data: { fill: dataSet.dataColor }, ...dataSet.dataStyle }}
-                    />
-                  )) ||
-                  null
-              )) ||
-              null}
-          </ChartStack>
+          {this.renderChart({})}
+          <ChartStack>{this.renderChart({ stacked: true })}</ChartStack>
         </Chart>
       </div>
     );
@@ -284,29 +287,20 @@ ChartArea.propTypes = {
     PropTypes.shape({
       data: PropTypes.arrayOf(
         PropTypes.shape({
-          x: PropTypes.number,
-          y: PropTypes.number,
+          x: PropTypes.number.isRequired,
+          y: PropTypes.number.isRequired,
           tooltip: PropTypes.string,
           xAxisLabel: PropTypes.string,
           yAxisLabel: PropTypes.string
         })
       ),
-      dataAnimate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-      dataColor: PropTypes.string,
-      dataInterpolation: PropTypes.string,
-      dataLegendLabel: PropTypes.string,
-      dataStyle: PropTypes.object,
-      threshold: PropTypes.arrayOf(
-        PropTypes.shape({
-          x: PropTypes.number,
-          y: PropTypes.number
-        })
-      ),
-      thresholdAnimate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-      thresholdColor: PropTypes.string,
-      thresholdInterpolation: PropTypes.string,
-      thresholdLegendLabel: PropTypes.string,
-      thresholdStyle: PropTypes.object,
+      animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+      color: PropTypes.string,
+      interpolation: PropTypes.string,
+      legendLabel: PropTypes.string,
+      style: PropTypes.object,
+      isStacked: PropTypes.bool,
+      isThreshold: PropTypes.bool,
       xAxisLabelUseDataSet: PropTypes.bool,
       yAxisLabelUseDataSet: PropTypes.bool
     })
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
index b6379633b..2619382c1 100644
--- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
+++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -16,7 +16,7 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.legendSocketsLabel\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:87
+#: src/components/rhelGraphCard/rhelGraphCard.js:90
 msgid \\"curiosity-graph.legendSocketsThresholdLabel\\"
 msgstr \\"\\"
 
@@ -48,7 +48,7 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.tooltipSocketsThreshold\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:102
+#: src/components/rhelGraphCard/rhelGraphCard.js:106
 msgctxt \\"CPU socket usage\\"
 msgid \\"curiosity-graph.heading\\"
 msgstr \\"\\"
@@ -68,8 +68,8 @@ msgctxt \\"Quarterly\\"
 msgid \\"curiosity-graph.dropdownQuarterly\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:105
 #: src/components/rhelGraphCard/rhelGraphCard.js:109
+#: src/components/rhelGraphCard/rhelGraphCard.js:113
 msgctxt \\"Select date range\\"
 msgid \\"curiosity-graph.dropdownPlaceholder\\"
 msgstr \\"\\"
diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
index 50c14d000..cfd39d489 100644
--- a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
+++ b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
@@ -51,6 +51,12 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
         dataSets={
           Array [
             Object {
+              "animate": Object {
+                "duration": 250,
+                "onLoad": Object {
+                  "duration": 250,
+                },
+              },
               "data": Array [
                 Object {
                   "tooltip": "t('curiosity-graph.tooltipSocketsNoData')",
@@ -239,22 +245,20 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
                   "y": 0,
                 },
               ],
-              "dataAnimate": Object {
-                "duration": 250,
-                "onLoad": Object {
-                  "duration": 250,
-                },
-              },
-              "dataLegendLabel": "t('curiosity-graph.legendSocketsLabel')",
-              "threshold": Array [],
-              "thresholdAnimate": Object {
+              "isStacked": true,
+              "legendLabel": "t('curiosity-graph.legendSocketsLabel')",
+            },
+            Object {
+              "animate": Object {
                 "duration": 100,
                 "onLoad": Object {
                   "duration": 100,
                 },
               },
-              "thresholdColor": "green",
-              "thresholdLegendLabel": "t('curiosity-graph.legendSocketsThresholdLabel')",
+              "color": "green",
+              "data": Array [],
+              "isThreshold": true,
+              "legendLabel": "t('curiosity-graph.legendSocketsThresholdLabel')",
             },
           ]
         }
@@ -284,6 +288,12 @@ exports[`RhelGraphCard Component should render multiple states: error shows zero
 Object {
   "chartBarData": Array [
     Object {
+      "animate": Object {
+        "duration": 250,
+        "onLoad": Object {
+          "duration": 250,
+        },
+      },
       "data": Array [
         Object {
           "tooltip": "10 t('curiosity-graph.tooltipSockets') June 1",
@@ -466,22 +476,20 @@ Object {
           "y": 0,
         },
       ],
-      "dataAnimate": Object {
-        "duration": 250,
-        "onLoad": Object {
-          "duration": 250,
-        },
-      },
-      "dataLegendLabel": "t('curiosity-graph.legendSocketsLabel')",
-      "threshold": Array [],
-      "thresholdAnimate": Object {
+      "isStacked": true,
+      "legendLabel": "t('curiosity-graph.legendSocketsLabel')",
+    },
+    Object {
+      "animate": Object {
         "duration": 100,
         "onLoad": Object {
           "duration": 100,
         },
       },
-      "thresholdColor": "green",
-      "thresholdLegendLabel": "t('curiosity-graph.legendSocketsThresholdLabel')",
+      "color": "green",
+      "data": Array [],
+      "isThreshold": true,
+      "legendLabel": "t('curiosity-graph.legendSocketsThresholdLabel')",
     },
   ],
 }
@@ -538,6 +546,12 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
         dataSets={
           Array [
             Object {
+              "animate": Object {
+                "duration": 250,
+                "onLoad": Object {
+                  "duration": 250,
+                },
+              },
               "data": Array [
                 Object {
                   "tooltip": "10 t('curiosity-graph.tooltipSockets') June 1",
@@ -720,22 +734,20 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
                   "y": 0,
                 },
               ],
-              "dataAnimate": Object {
-                "duration": 250,
-                "onLoad": Object {
-                  "duration": 250,
-                },
-              },
-              "dataLegendLabel": "t('curiosity-graph.legendSocketsLabel')",
-              "threshold": Array [],
-              "thresholdAnimate": Object {
+              "isStacked": true,
+              "legendLabel": "t('curiosity-graph.legendSocketsLabel')",
+            },
+            Object {
+              "animate": Object {
                 "duration": 100,
                 "onLoad": Object {
                   "duration": 100,
                 },
               },
-              "thresholdColor": "green",
-              "thresholdLegendLabel": "t('curiosity-graph.legendSocketsThresholdLabel')",
+              "color": "green",
+              "data": Array [],
+              "isThreshold": true,
+              "legendLabel": "t('curiosity-graph.legendSocketsThresholdLabel')",
             },
           ]
         }
diff --git a/src/components/rhelGraphCard/rhelGraphCard.js b/src/components/rhelGraphCard/rhelGraphCard.js
index 6117572b9..da3a6ad52 100644
--- a/src/components/rhelGraphCard/rhelGraphCard.js
+++ b/src/components/rhelGraphCard/rhelGraphCard.js
@@ -73,18 +73,22 @@ class RhelGraphCard extends React.Component {
         dataSets={[
           {
             data: chartData,
-            dataAnimate: {
+            animate: {
               duration: 250,
               onLoad: { duration: 250 }
             },
-            dataLegendLabel: t('curiosity-graph.legendSocketsLabel'),
-            threshold: chartDataThresholds,
-            thresholdAnimate: {
+            legendLabel: t('curiosity-graph.legendSocketsLabel'),
+            isStacked: true
+          },
+          {
+            data: chartDataThresholds,
+            animate: {
               duration: 100,
               onLoad: { duration: 100 }
             },
-            thresholdColor: ChartThemeColor.green,
-            thresholdLegendLabel: t('curiosity-graph.legendSocketsThresholdLabel')
+            color: ChartThemeColor.green,
+            legendLabel: t('curiosity-graph.legendSocketsThresholdLabel'),
+            isThreshold: true
           }
         ]}
       />