diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
index 788a65e21..af3c5b818 100644
--- a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
+++ b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -4,51 +4,113 @@ exports[`GraphCard Component should allow being disabled: disabled 1`] = `""`;
 
 exports[`GraphCard Component should render a basic component: basic 1`] = `
 <Fragment>
-  <GraphCardMetrics
-    metricFilters={
-      [
-        {
-          "id": "Core-seconds",
-          "isStacked": true,
+  <ContextProvider
+    value={
+      {
+        "settings": {
           "isStandalone": false,
-          "isThreshold": false,
-          "strokeWidth": 2,
+          "metric": undefined,
+          "metrics": [
+            {
+              "id": "Core-seconds",
+              "isStacked": true,
+              "isStandalone": false,
+              "isThreshold": false,
+              "strokeWidth": 2,
+            },
+          ],
         },
-      ]
+      }
     }
-    useProductGraphConfig={[Function]}
-  />
+  >
+    <GraphCardChart
+      t={[Function]}
+      useGetGraphTally={[Function]}
+      useGraphCardContext={[Function]}
+      useMetricsSelector={[Function]}
+      useProduct={[Function]}
+      useProductGraphTallyQuery={[Function]}
+    />
+  </ContextProvider>
 </Fragment>
 `;
 
 exports[`GraphCard Component should setup basic settings: settings 1`] = `
 <Fragment>
-  <GraphCardMetrics
-    metricFilters={
-      [
-        {
-          "id": "Core-seconds",
-          "isStacked": true,
+  <ContextProvider
+    value={
+      {
+        "settings": {
           "isStandalone": false,
-          "isThreshold": false,
-          "strokeWidth": 2,
+          "metric": undefined,
+          "metrics": [
+            {
+              "id": "Core-seconds",
+              "isStacked": true,
+              "isStandalone": false,
+              "isThreshold": false,
+              "strokeWidth": 2,
+            },
+          ],
         },
-      ]
+      }
     }
-    useProductGraphConfig={[Function]}
-  />
-  <GraphCardMetric
-    key="graphCard_Sockets"
-    metricFilter={
+  >
+    <GraphCardChart
+      t={[Function]}
+      useGetGraphTally={[Function]}
+      useGraphCardContext={[Function]}
+      useMetricsSelector={[Function]}
+      useProduct={[Function]}
+      useProductGraphTallyQuery={[Function]}
+    />
+  </ContextProvider>
+  <ContextProvider
+    key="graphCard_undefined"
+    value={
       {
-        "id": "Sockets",
-        "isStacked": true,
-        "isStandalone": true,
-        "isThreshold": false,
-        "strokeWidth": 2,
+        "settings": {
+          "isStandalone": true,
+          "metric": {
+            "id": "Sockets",
+            "isStacked": true,
+            "isStandalone": true,
+            "isThreshold": false,
+            "strokeWidth": 2,
+          },
+          "metrics": [
+            {
+              "id": "Sockets",
+              "isStacked": true,
+              "isStandalone": true,
+              "isThreshold": false,
+              "strokeWidth": 2,
+            },
+          ],
+          "padding": {
+            "bottom": 75,
+            "left": 75,
+            "right": 45,
+            "top": 45,
+          },
+        },
       }
     }
-    useProductGraphConfig={[Function]}
-  />
+  >
+    <GraphCardMetricTotals
+      t={[Function]}
+      useMetricsSelector={[Function]}
+      useProductGraphTallyQuery={[Function]}
+    >
+      <GraphCardChart
+        t={[Function]}
+        useGetGraphTally={[Function]}
+        useGraphCardContext={[Function]}
+        useMetricsSelector={[Function]}
+        useProduct={[Function]}
+        useProductGraphTallyQuery={[Function]}
+      />
+    </GraphCardMetricTotals>
+  </ContextProvider>
 </Fragment>
 `;
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap
index b919f2bc7..0887f7827 100644
--- a/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap
+++ b/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap
@@ -2,24 +2,30 @@
 
 exports[`GraphCardHelpers generateChartSettings should return base graph settings: basic filters 1`] = `
 {
-  "groupedFilters": [
-    {
-      "dolor": "sit",
-      "id": "dolorSit",
-      "isStacked": true,
+  "groupedFiltersSettings": {
+    "settings": {
       "isStandalone": false,
-      "isThreshold": false,
-      "strokeWidth": 2,
+      "metric": undefined,
+      "metrics": [
+        {
+          "dolor": "sit",
+          "id": "dolorSit",
+          "isStacked": true,
+          "isStandalone": false,
+          "isThreshold": false,
+          "strokeWidth": 2,
+        },
+      ],
     },
-  ],
-  "standaloneFilters": [],
+  },
+  "standaloneFiltersSettings": [],
 }
 `;
 
 exports[`GraphCardHelpers generateChartSettings should return base graph settings: no filters 1`] = `
 {
-  "groupedFilters": [],
-  "standaloneFilters": [],
+  "groupedFiltersSettings": undefined,
+  "standaloneFiltersSettings": [],
 }
 `;
 
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardMetric.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardMetric.test.js.snap
deleted file mode 100644
index ed9bd1f5a..000000000
--- a/src/components/graphCard/__tests__/__snapshots__/graphCardMetric.test.js.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GraphCardMetric Component should render a basic component: basic 1`] = `
-<ContextProvider
-  value={{}}
->
-  <GraphCardMetricTotals
-    t={[Function]}
-    useMetricsSelector={[Function]}
-    useProductGraphTallyQuery={[Function]}
-  >
-    <GraphCardChart
-      t={[Function]}
-      useGetGraphTally={[Function]}
-      useGraphCardContext={[Function]}
-      useMetricsSelector={[Function]}
-      useProduct={[Function]}
-      useProductGraphTallyQuery={[Function]}
-    />
-  </GraphCardMetricTotals>
-</ContextProvider>
-`;
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardMetrics.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardMetrics.test.js.snap
deleted file mode 100644
index 7361a3a90..000000000
--- a/src/components/graphCard/__tests__/__snapshots__/graphCardMetrics.test.js.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GraphCardMetrics Component should render a basic component: basic 1`] = `
-<ContextProvider
-  value={{}}
->
-  <GraphCardChart
-    t={[Function]}
-    useGetGraphTally={[Function]}
-    useGraphCardContext={[Function]}
-    useMetricsSelector={[Function]}
-    useProduct={[Function]}
-    useProductGraphTallyQuery={[Function]}
-  />
-</ContextProvider>
-`;
diff --git a/src/components/graphCard/__tests__/graphCardMetric.test.js b/src/components/graphCard/__tests__/graphCardMetric.test.js
deleted file mode 100644
index 54a6cd08f..000000000
--- a/src/components/graphCard/__tests__/graphCardMetric.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { GraphCardMetric } from '../graphCardMetric';
-
-describe('GraphCardMetric Component', () => {
-  it('should render a basic component', async () => {
-    const props = {};
-    const component = await shallowHookComponent(<GraphCardMetric {...props} />);
-
-    expect(component).toMatchSnapshot('basic');
-  });
-});
diff --git a/src/components/graphCard/__tests__/graphCardMetrics.test.js b/src/components/graphCard/__tests__/graphCardMetrics.test.js
deleted file mode 100644
index 575aeca05..000000000
--- a/src/components/graphCard/__tests__/graphCardMetrics.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { GraphCardMetrics } from '../graphCardMetrics';
-
-describe('GraphCardMetrics Component', () => {
-  it('should render a basic component', async () => {
-    const props = {};
-    const component = await shallowHookComponent(<GraphCardMetrics {...props} />);
-
-    expect(component).toMatchSnapshot('basic');
-  });
-});
diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
index 83a49f562..d22c4f215 100644
--- a/src/components/graphCard/graphCard.js
+++ b/src/components/graphCard/graphCard.js
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useProductGraphConfig } from '../productView/productViewContext';
 import { helpers } from '../../common';
-import { GraphCardMetrics } from './graphCardMetrics';
-import { GraphCardMetric } from './graphCardMetric';
+import { GraphCardMetricTotals } from './graphCardMetricTotals';
+import { GraphCardChart } from './graphCardChart';
+import { GraphCardContext } from './graphCardContext';
 import { graphCardHelpers } from './graphCardHelpers';
 
 /**
@@ -15,8 +16,11 @@ import { graphCardHelpers } from './graphCardHelpers';
  * @returns {Node}
  */
 const GraphCard = ({ isDisabled, useProductGraphConfig: useAliasProductGraphConfig }) => {
-  const { filters } = useAliasProductGraphConfig();
-  const { groupedFilters, standaloneFilters } = graphCardHelpers.generateChartSettings(filters);
+  const { filters, settings } = useAliasProductGraphConfig();
+  const { groupedFiltersSettings, standaloneFiltersSettings } = graphCardHelpers.generateChartSettings(
+    filters,
+    settings
+  );
 
   if (isDisabled) {
     return null;
@@ -24,9 +28,18 @@ const GraphCard = ({ isDisabled, useProductGraphConfig: useAliasProductGraphConf
 
   return (
     <React.Fragment>
-      {(groupedFilters?.length && <GraphCardMetrics metricFilters={groupedFilters} />) || null}
-      {standaloneFilters.map(metricFilter => (
-        <GraphCardMetric key={`graphCard_${metricFilter.id}`} metricFilter={metricFilter} />
+      {(groupedFiltersSettings && (
+        <GraphCardContext.Provider value={groupedFiltersSettings}>
+          <GraphCardChart />
+        </GraphCardContext.Provider>
+      )) ||
+        null}
+      {standaloneFiltersSettings?.map(filtersSettings => (
+        <GraphCardContext.Provider key={`graphCard_${filtersSettings?.metric?.id}`} value={filtersSettings}>
+          <GraphCardMetricTotals>
+            <GraphCardChart />
+          </GraphCardMetricTotals>
+        </GraphCardContext.Provider>
       ))}
     </React.Fragment>
   );
diff --git a/src/components/graphCard/graphCardHelpers.js b/src/components/graphCard/graphCardHelpers.js
index c8d0f65f9..0b7367dbd 100644
--- a/src/components/graphCard/graphCardHelpers.js
+++ b/src/components/graphCard/graphCardHelpers.js
@@ -4,16 +4,17 @@ import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../typ
 import { dateHelpers, helpers } from '../../common';
 
 /**
- * Update chart/graph filters with base settings with styling.
+ * Update chart/graph filters with core settings and styling.
  *
  * @param {Array} filters
- * @returns {{standaloneFilters: Array, groupedFilters: Array}}
+ * @param {object} graphCardSettings
+ * @returns {{standaloneFilters: Array, groupedFilters: object}}
  */
-const generateChartSettings = (filters = []) => {
-  const standaloneFilters = [];
-  const groupedFilters = [];
+const generateChartSettings = (filters = [], graphCardSettings = {}) => {
+  const standaloneFiltersSettings = [];
+  const groupedFiltersSettings = [];
 
-  filters.forEach(({ id, isStandalone = false, isThreshold = false, ...settings }) => {
+  filters.forEach(({ id, isStandalone = false, isThreshold = false, ...filterSettings }) => {
     if (!id) {
       return;
     }
@@ -33,21 +34,50 @@ const generateChartSettings = (filters = []) => {
     }
 
     if (isStandalone) {
-      standaloneFilters.push({
-        ...baseFilterSettings,
-        ...settings
+      standaloneFiltersSettings.push({
+        settings: {
+          padding: {
+            bottom: 75,
+            left: 75,
+            right: 45,
+            top: 45
+          },
+          ...graphCardSettings,
+          isStandalone: true,
+          metric: {
+            ...baseFilterSettings,
+            ...filterSettings
+          },
+          metrics: [
+            {
+              ...baseFilterSettings,
+              ...filterSettings
+            }
+          ]
+        }
       });
     } else {
-      groupedFilters.push({
+      groupedFiltersSettings.push({
         ...baseFilterSettings,
-        ...settings
+        ...filterSettings
       });
     }
   });
 
+  const updatedGroupedFiltersSettings =
+    (groupedFiltersSettings.length && {
+      settings: {
+        ...graphCardSettings,
+        isStandalone: false,
+        metric: undefined,
+        metrics: groupedFiltersSettings
+      }
+    }) ||
+    undefined;
+
   return {
-    standaloneFilters,
-    groupedFilters
+    standaloneFiltersSettings,
+    groupedFiltersSettings: updatedGroupedFiltersSettings
   };
 };
 
diff --git a/src/components/graphCard/graphCardMetric.js b/src/components/graphCard/graphCardMetric.js
deleted file mode 100644
index 57a17a74a..000000000
--- a/src/components/graphCard/graphCardMetric.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { GraphCardChart } from './graphCardChart';
-import { useProductGraphConfig } from '../productView/productViewContext';
-import { GraphCardContext } from './graphCardContext';
-import { rhsmConstants } from '../../services/rhsm/rhsmConstants';
-import { GraphCardMetricTotals } from './graphCardMetricTotals';
-
-/**
- * Display a single graph metric.
- *
- * @param {object} props
- * @param {object} props.metricFilter
- * @param {Function} props.useProductGraphConfig
- * @returns {Node}
- */
-const GraphCardMetric = ({ metricFilter, useProductGraphConfig: useAliasProductGraphConfig }) => {
-  const [context, setContext] = useState({});
-  const { settings } = useAliasProductGraphConfig();
-
-  useEffect(() => {
-    setContext({
-      settings: {
-        padding: {
-          bottom: 75,
-          left: 75,
-          right: 45,
-          top: 45
-        },
-        ...settings,
-        isStandalone: true,
-        metric: metricFilter,
-        metrics: [metricFilter]
-      }
-    });
-  }, [metricFilter, settings, setContext]);
-
-  return (
-    <GraphCardContext.Provider value={context}>
-      <GraphCardMetricTotals>
-        <GraphCardChart />
-      </GraphCardMetricTotals>
-    </GraphCardContext.Provider>
-  );
-};
-
-/**
- * Prop types.
- *
- * @type {{useProductGraphConfig: Function, metricFilter: object}}
- */
-GraphCardMetric.propTypes = {
-  metricFilter: PropTypes.shape({
-    id: PropTypes.oneOf([...Object.values(rhsmConstants.RHSM_API_PATH_METRIC_TYPES)])
-  }),
-  useProductGraphConfig: PropTypes.func
-};
-
-/**
- * Default props.
- *
- * @type {{useProductGraphConfig: Function, metricFilter: object}}
- */
-GraphCardMetric.defaultProps = {
-  metricFilter: {},
-  useProductGraphConfig
-};
-
-export { GraphCardMetric as default, GraphCardMetric };
diff --git a/src/components/graphCard/graphCardMetrics.js b/src/components/graphCard/graphCardMetrics.js
deleted file mode 100644
index 9ef81eee0..000000000
--- a/src/components/graphCard/graphCardMetrics.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { GraphCardChart } from './graphCardChart';
-import { useProductGraphConfig } from '../productView/productViewContext';
-import { GraphCardContext } from './graphCardContext';
-import { rhsmConstants } from '../../services/rhsm/rhsmConstants';
-
-/**
- * Display a single graph metric.
- *
- * @param {object} props
- * @param {Array} props.metricFilters
- * @param {Function} props.useProductGraphConfig
- * @returns {Node}
- */
-const GraphCardMetrics = ({ metricFilters, useProductGraphConfig: useAliasProductGraphConfig }) => {
-  const [context, setContext] = useState({});
-  const { settings } = useAliasProductGraphConfig();
-
-  useEffect(() => {
-    setContext({
-      settings: {
-        ...settings,
-        isStandalone: false,
-        metric: undefined,
-        metrics: metricFilters
-      }
-    });
-  }, [metricFilters, settings, setContext]);
-
-  return (
-    <GraphCardContext.Provider value={context}>
-      <GraphCardChart />
-    </GraphCardContext.Provider>
-  );
-};
-
-/**
- * Prop types.
- *
- * @type {{useProductGraphConfig: Function, metricFilters: Array}}
- */
-GraphCardMetrics.propTypes = {
-  metricFilters: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.oneOf([...Object.values(rhsmConstants.RHSM_API_PATH_METRIC_TYPES)])
-    })
-  ),
-  useProductGraphConfig: PropTypes.func
-};
-
-/**
- * Default props.
- *
- * @type {{useProductGraphConfig: Function, metricFilters: Array}}
- */
-GraphCardMetrics.defaultProps = {
-  metricFilters: [],
-  useProductGraphConfig
-};
-
-export { GraphCardMetrics as default, GraphCardMetrics };
diff --git a/src/config/__tests__/__snapshots__/product.rhacs.test.js.snap b/src/config/__tests__/__snapshots__/product.rhacs.test.js.snap
index 235a98133..197924fac 100644
--- a/src/config/__tests__/__snapshots__/product.rhacs.test.js.snap
+++ b/src/config/__tests__/__snapshots__/product.rhacs.test.js.snap
@@ -131,19 +131,44 @@ exports[`Product RHACS config should apply an instances inventory configuration
 
 exports[`Product RHACS config should apply graph configuration: filters 1`] = `
 {
-  "groupedFilters": [],
-  "standaloneFilters": [
-    {
-      "chartType": "line",
-      "color": "#06c",
-      "fill": "#8bc1f7",
-      "id": "Cores",
-      "isStacked": false,
-      "isStandalone": true,
-      "isThreshold": false,
-      "stroke": "#06c",
-      "strokeWidth": 2,
-      "yAxisChartLabel": [Function],
+  "groupedFiltersSettings": undefined,
+  "standaloneFiltersSettings": [
+    {
+      "settings": {
+        "isStandalone": true,
+        "metric": {
+          "chartType": "line",
+          "color": "#06c",
+          "fill": "#8bc1f7",
+          "id": "Cores",
+          "isStacked": false,
+          "isStandalone": true,
+          "isThreshold": false,
+          "stroke": "#06c",
+          "strokeWidth": 2,
+          "yAxisChartLabel": [Function],
+        },
+        "metrics": [
+          {
+            "chartType": "line",
+            "color": "#06c",
+            "fill": "#8bc1f7",
+            "id": "Cores",
+            "isStacked": false,
+            "isStandalone": true,
+            "isThreshold": false,
+            "stroke": "#06c",
+            "strokeWidth": 2,
+            "yAxisChartLabel": [Function],
+          },
+        ],
+        "padding": {
+          "bottom": 75,
+          "left": 75,
+          "right": 45,
+          "top": 45,
+        },
+      },
     },
   ],
 }
diff --git a/src/config/__tests__/__snapshots__/product.rhods.test.js.snap b/src/config/__tests__/__snapshots__/product.rhods.test.js.snap
index 7549cecf2..7226c2373 100644
--- a/src/config/__tests__/__snapshots__/product.rhods.test.js.snap
+++ b/src/config/__tests__/__snapshots__/product.rhods.test.js.snap
@@ -131,19 +131,44 @@ exports[`Product RHODS config should apply an instances inventory configuration
 
 exports[`Product RHODS config should apply graph configuration: filters 1`] = `
 {
-  "groupedFilters": [],
-  "standaloneFilters": [
-    {
-      "chartType": "line",
-      "color": "#06c",
-      "fill": "#8bc1f7",
-      "id": "Cores",
-      "isStacked": false,
-      "isStandalone": true,
-      "isThreshold": false,
-      "stroke": "#06c",
-      "strokeWidth": 2,
-      "yAxisChartLabel": [Function],
+  "groupedFiltersSettings": undefined,
+  "standaloneFiltersSettings": [
+    {
+      "settings": {
+        "isStandalone": true,
+        "metric": {
+          "chartType": "line",
+          "color": "#06c",
+          "fill": "#8bc1f7",
+          "id": "Cores",
+          "isStacked": false,
+          "isStandalone": true,
+          "isThreshold": false,
+          "stroke": "#06c",
+          "strokeWidth": 2,
+          "yAxisChartLabel": [Function],
+        },
+        "metrics": [
+          {
+            "chartType": "line",
+            "color": "#06c",
+            "fill": "#8bc1f7",
+            "id": "Cores",
+            "isStacked": false,
+            "isStandalone": true,
+            "isThreshold": false,
+            "stroke": "#06c",
+            "strokeWidth": 2,
+            "yAxisChartLabel": [Function],
+          },
+        ],
+        "padding": {
+          "bottom": 75,
+          "left": 75,
+          "right": 45,
+          "top": 45,
+        },
+      },
     },
   ],
 }
diff --git a/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap b/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap
index dcfb276fe..bc42cc056 100644
--- a/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap
+++ b/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap
@@ -223,43 +223,118 @@ exports[`Product RHOSAK config should apply an instances inventory configuration
 
 exports[`Product RHOSAK config should apply graph configuration: filters 1`] = `
 {
-  "groupedFilters": [],
-  "standaloneFilters": [
-    {
-      "chartType": "line",
-      "color": "#06c",
-      "fill": "#8bc1f7",
-      "id": "Transfer-gibibytes",
-      "isStacked": false,
-      "isStandalone": true,
-      "isThreshold": false,
-      "stroke": "#06c",
-      "strokeWidth": 2,
-      "yAxisChartLabel": [Function],
-    },
-    {
-      "chartType": "line",
-      "color": "#5752d1",
-      "fill": "#b2b0ea",
-      "id": "Storage-gibibyte-months",
-      "isStacked": false,
-      "isStandalone": true,
-      "isThreshold": false,
-      "stroke": "#5752d1",
-      "strokeWidth": 2,
-      "yAxisChartLabel": [Function],
-    },
-    {
-      "chartType": "line",
-      "color": "#009596",
-      "fill": "#a2d9d9",
-      "id": "Instance-hours",
-      "isStacked": false,
-      "isStandalone": true,
-      "isThreshold": false,
-      "stroke": "#009596",
-      "strokeWidth": 2,
-      "yAxisChartLabel": [Function],
+  "groupedFiltersSettings": undefined,
+  "standaloneFiltersSettings": [
+    {
+      "settings": {
+        "isStandalone": true,
+        "metric": {
+          "chartType": "line",
+          "color": "#06c",
+          "fill": "#8bc1f7",
+          "id": "Transfer-gibibytes",
+          "isStacked": false,
+          "isStandalone": true,
+          "isThreshold": false,
+          "stroke": "#06c",
+          "strokeWidth": 2,
+          "yAxisChartLabel": [Function],
+        },
+        "metrics": [
+          {
+            "chartType": "line",
+            "color": "#06c",
+            "fill": "#8bc1f7",
+            "id": "Transfer-gibibytes",
+            "isStacked": false,
+            "isStandalone": true,
+            "isThreshold": false,
+            "stroke": "#06c",
+            "strokeWidth": 2,
+            "yAxisChartLabel": [Function],
+          },
+        ],
+        "padding": {
+          "bottom": 75,
+          "left": 75,
+          "right": 45,
+          "top": 45,
+        },
+      },
+    },
+    {
+      "settings": {
+        "isStandalone": true,
+        "metric": {
+          "chartType": "line",
+          "color": "#5752d1",
+          "fill": "#b2b0ea",
+          "id": "Storage-gibibyte-months",
+          "isStacked": false,
+          "isStandalone": true,
+          "isThreshold": false,
+          "stroke": "#5752d1",
+          "strokeWidth": 2,
+          "yAxisChartLabel": [Function],
+        },
+        "metrics": [
+          {
+            "chartType": "line",
+            "color": "#5752d1",
+            "fill": "#b2b0ea",
+            "id": "Storage-gibibyte-months",
+            "isStacked": false,
+            "isStandalone": true,
+            "isThreshold": false,
+            "stroke": "#5752d1",
+            "strokeWidth": 2,
+            "yAxisChartLabel": [Function],
+          },
+        ],
+        "padding": {
+          "bottom": 75,
+          "left": 75,
+          "right": 45,
+          "top": 45,
+        },
+      },
+    },
+    {
+      "settings": {
+        "isStandalone": true,
+        "metric": {
+          "chartType": "line",
+          "color": "#009596",
+          "fill": "#a2d9d9",
+          "id": "Instance-hours",
+          "isStacked": false,
+          "isStandalone": true,
+          "isThreshold": false,
+          "stroke": "#009596",
+          "strokeWidth": 2,
+          "yAxisChartLabel": [Function],
+        },
+        "metrics": [
+          {
+            "chartType": "line",
+            "color": "#009596",
+            "fill": "#a2d9d9",
+            "id": "Instance-hours",
+            "isStacked": false,
+            "isStandalone": true,
+            "isThreshold": false,
+            "stroke": "#009596",
+            "strokeWidth": 2,
+            "yAxisChartLabel": [Function],
+          },
+        ],
+        "padding": {
+          "bottom": 75,
+          "left": 75,
+          "right": 45,
+          "top": 45,
+        },
+      },
     },
   ],
 }
diff --git a/tests/__snapshots__/dist.test.js.snap b/tests/__snapshots__/dist.test.js.snap
index a47e3e205..af688c7a3 100644
--- a/tests/__snapshots__/dist.test.js.snap
+++ b/tests/__snapshots__/dist.test.js.snap
@@ -3,11 +3,11 @@
 exports[`Build distribution should match a specific file output 1`] = `
 [
   "",
-  "./dist/css/2085*css",
-  "./dist/css/2251*css",
   "./dist/css/265*css",
+  "./dist/css/3557*css",
   "./dist/css/3769*css",
   "./dist/css/401*css",
+  "./dist/css/4262*css",
   "./dist/css/6402*css",
   "./dist/css/6891*css",
   "./dist/css/8485*css",
@@ -26,13 +26,11 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/js/1663*js",
   "./dist/js/1796*js",
   "./dist/js/1799*js",
-  "./dist/js/1806*js",
   "./dist/js/1824*js",
   "./dist/js/1858*js",
   "./dist/js/2195*js",
   "./dist/js/2217*js",
   "./dist/js/2243*js",
-  "./dist/js/2251*js",
   "./dist/js/2293*js",
   "./dist/js/2615*js",
   "./dist/js/2615*txt",
@@ -45,8 +43,8 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/js/3128*js",
   "./dist/js/3267*js",
   "./dist/js/3366*js",
-  "./dist/js/353*js",
   "./dist/js/3552*js",
+  "./dist/js/3557*js",
   "./dist/js/3722*js",
   "./dist/js/3722*txt",
   "./dist/js/3769*js",
@@ -60,6 +58,7 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/js/4096*js",
   "./dist/js/4097*js",
   "./dist/js/4155*js",
+  "./dist/js/4262*js",
   "./dist/js/4291*js",
   "./dist/js/4291*txt",
   "./dist/js/4311*js",
@@ -103,11 +102,11 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/js/8526*js",
   "./dist/js/8710*js",
   "./dist/js/8731*js",
+  "./dist/js/8869*js",
   "./dist/js/8900*js",
   "./dist/js/90*js",
   "./dist/js/9051*js",
   "./dist/js/9077*js",
-  "./dist/js/9175*js",
   "./dist/js/9270*js",
   "./dist/js/930*js",
   "./dist/js/931*js",
@@ -119,8 +118,8 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/js/9669*txt",
   "./dist/js/9833*js",
   "./dist/js/9844*js",
-  "./dist/js/9877*js",
   "./dist/js/9928*js",
+  "./dist/js/9942*js",
   "./dist/js/998*js",
   "./dist/js/App*js",
   "./dist/locales/en-US.json",
@@ -135,13 +134,11 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/sourcemaps/136*map",
   "./dist/sourcemaps/1663*map",
   "./dist/sourcemaps/1799*map",
-  "./dist/sourcemaps/1806*map",
   "./dist/sourcemaps/1824*map",
   "./dist/sourcemaps/1858*map",
   "./dist/sourcemaps/2195*map",
   "./dist/sourcemaps/2217*map",
   "./dist/sourcemaps/2243*map",
-  "./dist/sourcemaps/2251*map",
   "./dist/sourcemaps/2293*map",
   "./dist/sourcemaps/2615*map",
   "./dist/sourcemaps/265*map",
@@ -153,8 +150,8 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/sourcemaps/3128*map",
   "./dist/sourcemaps/3267*map",
   "./dist/sourcemaps/3366*map",
-  "./dist/sourcemaps/353*map",
   "./dist/sourcemaps/3552*map",
+  "./dist/sourcemaps/3557*map",
   "./dist/sourcemaps/3722*map",
   "./dist/sourcemaps/3769*map",
   "./dist/sourcemaps/3817*map",
@@ -166,6 +163,7 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/sourcemaps/4096*map",
   "./dist/sourcemaps/4097*map",
   "./dist/sourcemaps/4155*map",
+  "./dist/sourcemaps/4262*map",
   "./dist/sourcemaps/4291*map",
   "./dist/sourcemaps/4311*map",
   "./dist/sourcemaps/4314*map",
@@ -202,11 +200,11 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/sourcemaps/8526*map",
   "./dist/sourcemaps/8710*map",
   "./dist/sourcemaps/8731*map",
+  "./dist/sourcemaps/8869*map",
   "./dist/sourcemaps/8900*map",
   "./dist/sourcemaps/90*map",
   "./dist/sourcemaps/9051*map",
   "./dist/sourcemaps/9077*map",
-  "./dist/sourcemaps/9175*map",
   "./dist/sourcemaps/9270*map",
   "./dist/sourcemaps/930*map",
   "./dist/sourcemaps/931*map",
@@ -216,8 +214,8 @@ exports[`Build distribution should match a specific file output 1`] = `
   "./dist/sourcemaps/9669*map",
   "./dist/sourcemaps/9833*map",
   "./dist/sourcemaps/9844*map",
-  "./dist/sourcemaps/9877*map",
   "./dist/sourcemaps/9928*map",
+  "./dist/sourcemaps/9942*map",
   "./dist/sourcemaps/998*map",
   "./dist/sourcemaps/App*map",
   "./dist/subscriptions*js",