diff --git a/src/common/__tests__/graphHelpers.test.js b/src/common/__tests__/graphHelpers.test.js
index f5ceda720..f79cc06b5 100644
--- a/src/common/__tests__/graphHelpers.test.js
+++ b/src/common/__tests__/graphHelpers.test.js
@@ -1,12 +1,13 @@
 import { graphHelpers, getGraphHeight, getTooltipDimensions, getTooltipFontSize } from '../graphHelpers';
 import { helpers } from '../helpers';
 
-const { breakpoints } = helpers;
-
 describe('GraphHelpers', () => {
+  const { breakpoints } = helpers;
+
   it('should have specific functions', () => {
     expect(graphHelpers).toMatchSnapshot('helpers');
   });
+
   it('should match graph heights at all breakpoints', () => {
     expect(getGraphHeight(breakpoints, 'xs')).toMatchSnapshot('xs graph height');
     expect(getGraphHeight(breakpoints, 'sm')).toMatchSnapshot('sm graph height');
@@ -15,6 +16,7 @@ describe('GraphHelpers', () => {
     expect(getGraphHeight(breakpoints, 'xl')).toMatchSnapshot('xl graph height');
     expect(getGraphHeight(breakpoints, 'xl2')).toMatchSnapshot('xl2 graph height');
   });
+
   it('should match tooltip dimensions at all breakpoints', () => {
     expect(getTooltipDimensions(breakpoints, 'xs')).toMatchSnapshot('xs tooltip dimensions');
     expect(getTooltipDimensions(breakpoints, 'sm')).toMatchSnapshot('sm tooltip dimensions');
@@ -23,6 +25,7 @@ describe('GraphHelpers', () => {
     expect(getTooltipDimensions(breakpoints, 'xl')).toMatchSnapshot('xl tooltip dimensions');
     expect(getTooltipDimensions(breakpoints, 'xl2')).toMatchSnapshot('xl2 tooltip dimensions');
   });
+
   it('should match tooltip font sizes at all breakpoints', () => {
     expect(getTooltipFontSize(breakpoints, 'xs')).toMatchSnapshot('xs tooltip font sizes');
     expect(getTooltipFontSize(breakpoints, 'sm')).toMatchSnapshot('sm tooltip font sizes');
diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
index 970f72aee..a1be66630 100644
--- a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
+++ b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
@@ -1,5 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RhelGraphCard Component should have specific breakpoint styles based on state: lg breakpoint 1`] = `
+Object {
+  "chartBarLabelComponentHeight": 40,
+  "chartBarLabelComponentStyle": Object {
+    "fontSize": 12,
+  },
+  "chartHeight": 200,
+}
+`;
+
+exports[`RhelGraphCard Component should have specific breakpoint styles based on state: md breakpoint 1`] = `
+Object {
+  "chartBarLabelComponentHeight": 40,
+  "chartBarLabelComponentStyle": Object {
+    "fontSize": 14,
+  },
+  "chartHeight": 400,
+}
+`;
+
+exports[`RhelGraphCard Component should have specific breakpoint styles based on state: sm breakpoint 1`] = `
+Object {
+  "chartBarLabelComponentHeight": 50,
+  "chartBarLabelComponentStyle": Object {
+    "fontSize": 14,
+  },
+  "chartHeight": 400,
+}
+`;
+
+exports[`RhelGraphCard Component should have specific breakpoint styles based on state: xl breakpoint 1`] = `
+Object {
+  "chartBarLabelComponentHeight": 30,
+  "chartBarLabelComponentStyle": Object {
+    "fontSize": 8,
+  },
+  "chartHeight": 200,
+}
+`;
+
+exports[`RhelGraphCard Component should have specific breakpoint styles based on state: xl2 breakpoint 1`] = `
+Object {
+  "chartBarLabelComponentHeight": 20,
+  "chartBarLabelComponentStyle": Object {
+    "fontSize": 8,
+  },
+  "chartHeight": 200,
+}
+`;
+
+exports[`RhelGraphCard Component should have specific breakpoint styles based on state: xs breakpoint 1`] = `
+Object {
+  "chartBarLabelComponentHeight": 60,
+  "chartBarLabelComponentStyle": Object {
+    "fontSize": 14,
+  },
+  "chartHeight": 400,
+}
+`;
+
 exports[`RhelGraphCard Component should render a non-connected component: non-connected 1`] = `
 <RhelGraphCard
   breakpoints={Object {}}
@@ -181,3414 +241,6 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
 </RhelGraphCard>
 `;
 
-exports[`RhelGraphCard Component should render breakpoint states: lg breakpoint 1`] = `
-<Card
-  className="curiosity-usage-graph fadein"
->
-  <CardHead>
-    <h2>
-      Daily CPU socket usage
-    </h2>
-    <CardActions>
-      <Dropdown
-        autoFocus={true}
-        className=""
-        direction="down"
-        dropdownItems={Array []}
-        isGrouped={false}
-        isOpen={false}
-        isPlain={false}
-        onSelect={[Function]}
-        position="right"
-        toggle={
-          <DropdownToggle
-            className=""
-            iconComponent={[Function]}
-            id=""
-            isActive={false}
-            isDisabled={true}
-            isFocused={false}
-            isHovered={false}
-            isOpen={false}
-            isPlain={false}
-            onToggle={[Function]}
-            parentRef={null}
-          >
-            Last 30 Days
-          </DropdownToggle>
-        }
-      />
-    </CardActions>
-  </CardHead>
-  <CardBody>
-    <div
-      className="stack-chart-container"
-    >
-      <Chart
-        domainPadding={
-          Object {
-            "x": Array [
-              10,
-              2,
-            ],
-            "y": Array [
-              1,
-              1,
-            ],
-          }
-        }
-        height={200}
-      >
-        <ChartStack>
-          <ChartBar
-            data={
-              Array [
-                Object {
-                  "label": "30 Sockets on May 25",
-                  "x": "May 25",
-                  "y": 30,
-                },
-                Object {
-                  "label": "60 Sockets on May 26 
- +30 from previous day",
-                  "x": "May 26",
-                  "y": 60,
-                },
-                Object {
-                  "x": "May 27",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 28",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 29",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 30",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 31",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 1",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 2",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 3",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 4",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 5",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 6",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 7",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 8",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 9",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 10",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 11",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 12",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 13",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 14",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 15",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 16",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 17",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 18",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 19",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 20",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 21",
-                  "y": 5,
-                },
-                Object {
-                  "x": "Jun 22",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 23",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 24",
-                  "y": 1,
-                },
-              ]
-            }
-            labelComponent={
-              <ChartTooltip
-                height={40}
-                labelComponent={
-                  <ChartLabel
-                    className="curiosity-usage-graph-tooltip-text"
-                    dy={-1}
-                  />
-                }
-                style={
-                  Object {
-                    "fontSize": 12,
-                  }
-                }
-                theme={
-                  Object {
-                    "area": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "fillOpacity": 0.4,
-                          "stroke": "transparent",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "axis": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "axis": Object {
-                          "fill": "transparent",
-                          "stroke": "#d2d2d2",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                        "axisLabel": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 100,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                        "grid": Object {
-                          "fill": "none",
-                          "pointerEvents": "painted",
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                        },
-                        "tickLabels": Object {
-                          "fill": "#4d5258",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "ticks": Object {
-                          "fill": "transparent",
-                          "size": 5,
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "bar": Object {
-                      "barWidth": 10,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "padding": 8,
-                          "stroke": "none",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "boxplot": Object {
-                      "boxWidth": 20,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "max": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "maxLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "median": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "medianLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "min": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "minLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q1": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q1Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q3": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q3Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "candlestick": Object {
-                      "candleColors": Object {
-                        "negative": "#151515",
-                        "positive": "#fff",
-                      },
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "chart": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "errorbar": Object {
-                      "borderWidth": 8,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "group": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "legend": Object {
-                      "gutter": 20,
-                      "orientation": "horizontal",
-                      "style": Object {
-                        "data": Object {
-                          "type": "square",
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "title": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 2,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "titleOrientation": "top",
-                    },
-                    "line": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "pie": Object {
-                      "height": 230,
-                      "padding": 8,
-                      "style": Object {
-                        "data": Object {
-                          "padding": 8,
-                          "stroke": "transparent",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 230,
-                    },
-                    "scatter": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "opacity": 1,
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "stack": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "tooltip": Object {
-                      "cornerRadius": 0,
-                      "flyoutStyle": Object {
-                        "cornerRadius": 0,
-                        "fill": "#151515",
-                        "pointerEvents": "none",
-                        "stroke": "#151515",
-                        "strokeWidth": 0,
-                      },
-                      "pointerLength": 3,
-                      "pointerWidth": 15,
-                      "style": Object {
-                        "fill": "#ededed",
-                        "padding": 16,
-                        "pointerEvents": "none",
-                      },
-                    },
-                    "voronoi": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "flyout": Object {
-                          "fill": "#151515",
-                          "pointerEvents": "none",
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fill": "#ededed",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "pointerEvents": "none",
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                  }
-                }
-                width={120}
-              />
-            }
-          />
-        </ChartStack>
-      </Chart>
-    </div>
-  </CardBody>
-</Card>
-`;
-
-exports[`RhelGraphCard Component should render breakpoint states: md breakpoint 1`] = `
-<Card
-  className="curiosity-usage-graph fadein"
->
-  <CardHead>
-    <h2>
-      Daily CPU socket usage
-    </h2>
-    <CardActions>
-      <Dropdown
-        autoFocus={true}
-        className=""
-        direction="down"
-        dropdownItems={Array []}
-        isGrouped={false}
-        isOpen={false}
-        isPlain={false}
-        onSelect={[Function]}
-        position="right"
-        toggle={
-          <DropdownToggle
-            className=""
-            iconComponent={[Function]}
-            id=""
-            isActive={false}
-            isDisabled={true}
-            isFocused={false}
-            isHovered={false}
-            isOpen={false}
-            isPlain={false}
-            onToggle={[Function]}
-            parentRef={null}
-          >
-            Last 30 Days
-          </DropdownToggle>
-        }
-      />
-    </CardActions>
-  </CardHead>
-  <CardBody>
-    <div
-      className="stack-chart-container"
-    >
-      <Chart
-        domainPadding={
-          Object {
-            "x": Array [
-              10,
-              2,
-            ],
-            "y": Array [
-              1,
-              1,
-            ],
-          }
-        }
-        height={400}
-      >
-        <ChartStack>
-          <ChartBar
-            data={
-              Array [
-                Object {
-                  "label": "30 Sockets on May 25",
-                  "x": "May 25",
-                  "y": 30,
-                },
-                Object {
-                  "label": "60 Sockets on May 26 
- +30 from previous day",
-                  "x": "May 26",
-                  "y": 60,
-                },
-                Object {
-                  "x": "May 27",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 28",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 29",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 30",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 31",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 1",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 2",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 3",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 4",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 5",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 6",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 7",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 8",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 9",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 10",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 11",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 12",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 13",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 14",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 15",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 16",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 17",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 18",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 19",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 20",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 21",
-                  "y": 5,
-                },
-                Object {
-                  "x": "Jun 22",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 23",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 24",
-                  "y": 1,
-                },
-              ]
-            }
-            labelComponent={
-              <ChartTooltip
-                height={40}
-                labelComponent={
-                  <ChartLabel
-                    className="curiosity-usage-graph-tooltip-text"
-                    dy={-1}
-                  />
-                }
-                style={
-                  Object {
-                    "fontSize": 14,
-                  }
-                }
-                theme={
-                  Object {
-                    "area": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "fillOpacity": 0.4,
-                          "stroke": "transparent",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "axis": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "axis": Object {
-                          "fill": "transparent",
-                          "stroke": "#d2d2d2",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                        "axisLabel": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 100,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                        "grid": Object {
-                          "fill": "none",
-                          "pointerEvents": "painted",
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                        },
-                        "tickLabels": Object {
-                          "fill": "#4d5258",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "ticks": Object {
-                          "fill": "transparent",
-                          "size": 5,
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "bar": Object {
-                      "barWidth": 10,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "padding": 8,
-                          "stroke": "none",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "boxplot": Object {
-                      "boxWidth": 20,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "max": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "maxLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "median": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "medianLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "min": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "minLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q1": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q1Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q3": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q3Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "candlestick": Object {
-                      "candleColors": Object {
-                        "negative": "#151515",
-                        "positive": "#fff",
-                      },
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "chart": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "errorbar": Object {
-                      "borderWidth": 8,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "group": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "legend": Object {
-                      "gutter": 20,
-                      "orientation": "horizontal",
-                      "style": Object {
-                        "data": Object {
-                          "type": "square",
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "title": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 2,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "titleOrientation": "top",
-                    },
-                    "line": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "pie": Object {
-                      "height": 230,
-                      "padding": 8,
-                      "style": Object {
-                        "data": Object {
-                          "padding": 8,
-                          "stroke": "transparent",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 230,
-                    },
-                    "scatter": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "opacity": 1,
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "stack": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "tooltip": Object {
-                      "cornerRadius": 0,
-                      "flyoutStyle": Object {
-                        "cornerRadius": 0,
-                        "fill": "#151515",
-                        "pointerEvents": "none",
-                        "stroke": "#151515",
-                        "strokeWidth": 0,
-                      },
-                      "pointerLength": 3,
-                      "pointerWidth": 15,
-                      "style": Object {
-                        "fill": "#ededed",
-                        "padding": 16,
-                        "pointerEvents": "none",
-                      },
-                    },
-                    "voronoi": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "flyout": Object {
-                          "fill": "#151515",
-                          "pointerEvents": "none",
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fill": "#ededed",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "pointerEvents": "none",
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                  }
-                }
-                width={140}
-              />
-            }
-          />
-        </ChartStack>
-      </Chart>
-    </div>
-  </CardBody>
-</Card>
-`;
-
-exports[`RhelGraphCard Component should render breakpoint states: sm breakpoint 1`] = `
-<Card
-  className="curiosity-usage-graph fadein"
->
-  <CardHead>
-    <h2>
-      Daily CPU socket usage
-    </h2>
-    <CardActions>
-      <Dropdown
-        autoFocus={true}
-        className=""
-        direction="down"
-        dropdownItems={Array []}
-        isGrouped={false}
-        isOpen={false}
-        isPlain={false}
-        onSelect={[Function]}
-        position="right"
-        toggle={
-          <DropdownToggle
-            className=""
-            iconComponent={[Function]}
-            id=""
-            isActive={false}
-            isDisabled={true}
-            isFocused={false}
-            isHovered={false}
-            isOpen={false}
-            isPlain={false}
-            onToggle={[Function]}
-            parentRef={null}
-          >
-            Last 30 Days
-          </DropdownToggle>
-        }
-      />
-    </CardActions>
-  </CardHead>
-  <CardBody>
-    <div
-      className="stack-chart-container"
-    >
-      <Chart
-        domainPadding={
-          Object {
-            "x": Array [
-              10,
-              2,
-            ],
-            "y": Array [
-              1,
-              1,
-            ],
-          }
-        }
-        height={400}
-      >
-        <ChartStack>
-          <ChartBar
-            data={
-              Array [
-                Object {
-                  "label": "30 Sockets on May 25",
-                  "x": "May 25",
-                  "y": 30,
-                },
-                Object {
-                  "label": "60 Sockets on May 26 
- +30 from previous day",
-                  "x": "May 26",
-                  "y": 60,
-                },
-                Object {
-                  "x": "May 27",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 28",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 29",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 30",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 31",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 1",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 2",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 3",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 4",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 5",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 6",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 7",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 8",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 9",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 10",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 11",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 12",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 13",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 14",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 15",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 16",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 17",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 18",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 19",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 20",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 21",
-                  "y": 5,
-                },
-                Object {
-                  "x": "Jun 22",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 23",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 24",
-                  "y": 1,
-                },
-              ]
-            }
-            labelComponent={
-              <ChartTooltip
-                height={50}
-                labelComponent={
-                  <ChartLabel
-                    className="curiosity-usage-graph-tooltip-text"
-                    dy={-1}
-                  />
-                }
-                style={
-                  Object {
-                    "fontSize": 14,
-                  }
-                }
-                theme={
-                  Object {
-                    "area": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "fillOpacity": 0.4,
-                          "stroke": "transparent",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "axis": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "axis": Object {
-                          "fill": "transparent",
-                          "stroke": "#d2d2d2",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                        "axisLabel": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 100,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                        "grid": Object {
-                          "fill": "none",
-                          "pointerEvents": "painted",
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                        },
-                        "tickLabels": Object {
-                          "fill": "#4d5258",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "ticks": Object {
-                          "fill": "transparent",
-                          "size": 5,
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "bar": Object {
-                      "barWidth": 10,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "padding": 8,
-                          "stroke": "none",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "boxplot": Object {
-                      "boxWidth": 20,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "max": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "maxLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "median": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "medianLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "min": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "minLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q1": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q1Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q3": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q3Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "candlestick": Object {
-                      "candleColors": Object {
-                        "negative": "#151515",
-                        "positive": "#fff",
-                      },
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "chart": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "errorbar": Object {
-                      "borderWidth": 8,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "group": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "legend": Object {
-                      "gutter": 20,
-                      "orientation": "horizontal",
-                      "style": Object {
-                        "data": Object {
-                          "type": "square",
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "title": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 2,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "titleOrientation": "top",
-                    },
-                    "line": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "pie": Object {
-                      "height": 230,
-                      "padding": 8,
-                      "style": Object {
-                        "data": Object {
-                          "padding": 8,
-                          "stroke": "transparent",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 230,
-                    },
-                    "scatter": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "opacity": 1,
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "stack": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "tooltip": Object {
-                      "cornerRadius": 0,
-                      "flyoutStyle": Object {
-                        "cornerRadius": 0,
-                        "fill": "#151515",
-                        "pointerEvents": "none",
-                        "stroke": "#151515",
-                        "strokeWidth": 0,
-                      },
-                      "pointerLength": 3,
-                      "pointerWidth": 15,
-                      "style": Object {
-                        "fill": "#ededed",
-                        "padding": 16,
-                        "pointerEvents": "none",
-                      },
-                    },
-                    "voronoi": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "flyout": Object {
-                          "fill": "#151515",
-                          "pointerEvents": "none",
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fill": "#ededed",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "pointerEvents": "none",
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                  }
-                }
-                width={180}
-              />
-            }
-          />
-        </ChartStack>
-      </Chart>
-    </div>
-  </CardBody>
-</Card>
-`;
-
-exports[`RhelGraphCard Component should render breakpoint states: xl breakpoint 1`] = `
-<Card
-  className="curiosity-usage-graph fadein"
->
-  <CardHead>
-    <h2>
-      Daily CPU socket usage
-    </h2>
-    <CardActions>
-      <Dropdown
-        autoFocus={true}
-        className=""
-        direction="down"
-        dropdownItems={Array []}
-        isGrouped={false}
-        isOpen={false}
-        isPlain={false}
-        onSelect={[Function]}
-        position="right"
-        toggle={
-          <DropdownToggle
-            className=""
-            iconComponent={[Function]}
-            id=""
-            isActive={false}
-            isDisabled={true}
-            isFocused={false}
-            isHovered={false}
-            isOpen={false}
-            isPlain={false}
-            onToggle={[Function]}
-            parentRef={null}
-          >
-            Last 30 Days
-          </DropdownToggle>
-        }
-      />
-    </CardActions>
-  </CardHead>
-  <CardBody>
-    <div
-      className="stack-chart-container"
-    >
-      <Chart
-        domainPadding={
-          Object {
-            "x": Array [
-              10,
-              2,
-            ],
-            "y": Array [
-              1,
-              1,
-            ],
-          }
-        }
-        height={200}
-      >
-        <ChartStack>
-          <ChartBar
-            data={
-              Array [
-                Object {
-                  "label": "30 Sockets on May 25",
-                  "x": "May 25",
-                  "y": 30,
-                },
-                Object {
-                  "label": "60 Sockets on May 26 
- +30 from previous day",
-                  "x": "May 26",
-                  "y": 60,
-                },
-                Object {
-                  "x": "May 27",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 28",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 29",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 30",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 31",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 1",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 2",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 3",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 4",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 5",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 6",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 7",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 8",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 9",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 10",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 11",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 12",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 13",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 14",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 15",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 16",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 17",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 18",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 19",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 20",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 21",
-                  "y": 5,
-                },
-                Object {
-                  "x": "Jun 22",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 23",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 24",
-                  "y": 1,
-                },
-              ]
-            }
-            labelComponent={
-              <ChartTooltip
-                height={30}
-                labelComponent={
-                  <ChartLabel
-                    className="curiosity-usage-graph-tooltip-text"
-                    dy={-1}
-                  />
-                }
-                style={
-                  Object {
-                    "fontSize": 8,
-                  }
-                }
-                theme={
-                  Object {
-                    "area": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "fillOpacity": 0.4,
-                          "stroke": "transparent",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "axis": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "axis": Object {
-                          "fill": "transparent",
-                          "stroke": "#d2d2d2",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                        "axisLabel": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 100,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                        "grid": Object {
-                          "fill": "none",
-                          "pointerEvents": "painted",
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                        },
-                        "tickLabels": Object {
-                          "fill": "#4d5258",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "ticks": Object {
-                          "fill": "transparent",
-                          "size": 5,
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "bar": Object {
-                      "barWidth": 10,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "padding": 8,
-                          "stroke": "none",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "boxplot": Object {
-                      "boxWidth": 20,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "max": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "maxLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "median": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "medianLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "min": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "minLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q1": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q1Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q3": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q3Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "candlestick": Object {
-                      "candleColors": Object {
-                        "negative": "#151515",
-                        "positive": "#fff",
-                      },
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "chart": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "errorbar": Object {
-                      "borderWidth": 8,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "group": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "legend": Object {
-                      "gutter": 20,
-                      "orientation": "horizontal",
-                      "style": Object {
-                        "data": Object {
-                          "type": "square",
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "title": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 2,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "titleOrientation": "top",
-                    },
-                    "line": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "pie": Object {
-                      "height": 230,
-                      "padding": 8,
-                      "style": Object {
-                        "data": Object {
-                          "padding": 8,
-                          "stroke": "transparent",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 230,
-                    },
-                    "scatter": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "opacity": 1,
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "stack": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "tooltip": Object {
-                      "cornerRadius": 0,
-                      "flyoutStyle": Object {
-                        "cornerRadius": 0,
-                        "fill": "#151515",
-                        "pointerEvents": "none",
-                        "stroke": "#151515",
-                        "strokeWidth": 0,
-                      },
-                      "pointerLength": 3,
-                      "pointerWidth": 15,
-                      "style": Object {
-                        "fill": "#ededed",
-                        "padding": 16,
-                        "pointerEvents": "none",
-                      },
-                    },
-                    "voronoi": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "flyout": Object {
-                          "fill": "#151515",
-                          "pointerEvents": "none",
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fill": "#ededed",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "pointerEvents": "none",
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                  }
-                }
-                width={90}
-              />
-            }
-          />
-        </ChartStack>
-      </Chart>
-    </div>
-  </CardBody>
-</Card>
-`;
-
-exports[`RhelGraphCard Component should render breakpoint states: xl2 breakpoint 1`] = `
-<Card
-  className="curiosity-usage-graph fadein"
->
-  <CardHead>
-    <h2>
-      Daily CPU socket usage
-    </h2>
-    <CardActions>
-      <Dropdown
-        autoFocus={true}
-        className=""
-        direction="down"
-        dropdownItems={Array []}
-        isGrouped={false}
-        isOpen={false}
-        isPlain={false}
-        onSelect={[Function]}
-        position="right"
-        toggle={
-          <DropdownToggle
-            className=""
-            iconComponent={[Function]}
-            id=""
-            isActive={false}
-            isDisabled={true}
-            isFocused={false}
-            isHovered={false}
-            isOpen={false}
-            isPlain={false}
-            onToggle={[Function]}
-            parentRef={null}
-          >
-            Last 30 Days
-          </DropdownToggle>
-        }
-      />
-    </CardActions>
-  </CardHead>
-  <CardBody>
-    <div
-      className="stack-chart-container"
-    >
-      <Chart
-        domainPadding={
-          Object {
-            "x": Array [
-              10,
-              2,
-            ],
-            "y": Array [
-              1,
-              1,
-            ],
-          }
-        }
-        height={200}
-      >
-        <ChartStack>
-          <ChartBar
-            data={
-              Array [
-                Object {
-                  "label": "30 Sockets on May 25",
-                  "x": "May 25",
-                  "y": 30,
-                },
-                Object {
-                  "label": "60 Sockets on May 26 
- +30 from previous day",
-                  "x": "May 26",
-                  "y": 60,
-                },
-                Object {
-                  "x": "May 27",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 28",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 29",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 30",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 31",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 1",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 2",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 3",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 4",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 5",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 6",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 7",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 8",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 9",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 10",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 11",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 12",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 13",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 14",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 15",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 16",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 17",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 18",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 19",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 20",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 21",
-                  "y": 5,
-                },
-                Object {
-                  "x": "Jun 22",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 23",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 24",
-                  "y": 1,
-                },
-              ]
-            }
-            labelComponent={
-              <ChartTooltip
-                height={20}
-                labelComponent={
-                  <ChartLabel
-                    className="curiosity-usage-graph-tooltip-text"
-                    dy={-1}
-                  />
-                }
-                style={
-                  Object {
-                    "fontSize": 8,
-                  }
-                }
-                theme={
-                  Object {
-                    "area": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "fillOpacity": 0.4,
-                          "stroke": "transparent",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "axis": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "axis": Object {
-                          "fill": "transparent",
-                          "stroke": "#d2d2d2",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                        "axisLabel": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 100,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                        "grid": Object {
-                          "fill": "none",
-                          "pointerEvents": "painted",
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                        },
-                        "tickLabels": Object {
-                          "fill": "#4d5258",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "ticks": Object {
-                          "fill": "transparent",
-                          "size": 5,
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "bar": Object {
-                      "barWidth": 10,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "padding": 8,
-                          "stroke": "none",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "boxplot": Object {
-                      "boxWidth": 20,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "max": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "maxLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "median": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "medianLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "min": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "minLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q1": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q1Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q3": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q3Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "candlestick": Object {
-                      "candleColors": Object {
-                        "negative": "#151515",
-                        "positive": "#fff",
-                      },
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "chart": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "errorbar": Object {
-                      "borderWidth": 8,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "group": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "legend": Object {
-                      "gutter": 20,
-                      "orientation": "horizontal",
-                      "style": Object {
-                        "data": Object {
-                          "type": "square",
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "title": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 2,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "titleOrientation": "top",
-                    },
-                    "line": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "pie": Object {
-                      "height": 230,
-                      "padding": 8,
-                      "style": Object {
-                        "data": Object {
-                          "padding": 8,
-                          "stroke": "transparent",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 230,
-                    },
-                    "scatter": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "opacity": 1,
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "stack": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "tooltip": Object {
-                      "cornerRadius": 0,
-                      "flyoutStyle": Object {
-                        "cornerRadius": 0,
-                        "fill": "#151515",
-                        "pointerEvents": "none",
-                        "stroke": "#151515",
-                        "strokeWidth": 0,
-                      },
-                      "pointerLength": 3,
-                      "pointerWidth": 15,
-                      "style": Object {
-                        "fill": "#ededed",
-                        "padding": 16,
-                        "pointerEvents": "none",
-                      },
-                    },
-                    "voronoi": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "flyout": Object {
-                          "fill": "#151515",
-                          "pointerEvents": "none",
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fill": "#ededed",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "pointerEvents": "none",
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                  }
-                }
-                width={80}
-              />
-            }
-          />
-        </ChartStack>
-      </Chart>
-    </div>
-  </CardBody>
-</Card>
-`;
-
-exports[`RhelGraphCard Component should render breakpoint states: xs breakpoint 1`] = `
-<Card
-  className="curiosity-usage-graph fadein"
->
-  <CardHead>
-    <h2>
-      Daily CPU socket usage
-    </h2>
-    <CardActions>
-      <Dropdown
-        autoFocus={true}
-        className=""
-        direction="down"
-        dropdownItems={Array []}
-        isGrouped={false}
-        isOpen={false}
-        isPlain={false}
-        onSelect={[Function]}
-        position="right"
-        toggle={
-          <DropdownToggle
-            className=""
-            iconComponent={[Function]}
-            id=""
-            isActive={false}
-            isDisabled={true}
-            isFocused={false}
-            isHovered={false}
-            isOpen={false}
-            isPlain={false}
-            onToggle={[Function]}
-            parentRef={null}
-          >
-            Last 30 Days
-          </DropdownToggle>
-        }
-      />
-    </CardActions>
-  </CardHead>
-  <CardBody>
-    <div
-      className="stack-chart-container"
-    >
-      <Chart
-        domainPadding={
-          Object {
-            "x": Array [
-              10,
-              2,
-            ],
-            "y": Array [
-              1,
-              1,
-            ],
-          }
-        }
-        height={400}
-      >
-        <ChartStack>
-          <ChartBar
-            data={
-              Array [
-                Object {
-                  "label": "30 Sockets on May 25",
-                  "x": "May 25",
-                  "y": 30,
-                },
-                Object {
-                  "label": "60 Sockets on May 26 
- +30 from previous day",
-                  "x": "May 26",
-                  "y": 60,
-                },
-                Object {
-                  "x": "May 27",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 28",
-                  "y": 1,
-                },
-                Object {
-                  "x": "May 29",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 30",
-                  "y": 2,
-                },
-                Object {
-                  "x": "May 31",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 1",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 2",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 3",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 4",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 5",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 6",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 7",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 8",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 9",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 10",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 11",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 12",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 13",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 14",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 15",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 16",
-                  "y": 4,
-                },
-                Object {
-                  "x": "Jun 17",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 18",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 19",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 20",
-                  "y": 2,
-                },
-                Object {
-                  "x": "Jun 21",
-                  "y": 5,
-                },
-                Object {
-                  "x": "Jun 22",
-                  "y": 3,
-                },
-                Object {
-                  "x": "Jun 23",
-                  "y": 1,
-                },
-                Object {
-                  "x": "Jun 24",
-                  "y": 1,
-                },
-              ]
-            }
-            labelComponent={
-              <ChartTooltip
-                height={60}
-                labelComponent={
-                  <ChartLabel
-                    className="curiosity-usage-graph-tooltip-text"
-                    dy={-1}
-                  />
-                }
-                style={
-                  Object {
-                    "fontSize": 14,
-                  }
-                }
-                theme={
-                  Object {
-                    "area": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "fillOpacity": 0.4,
-                          "stroke": "transparent",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "axis": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "axis": Object {
-                          "fill": "transparent",
-                          "stroke": "#d2d2d2",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                        "axisLabel": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 100,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                        "grid": Object {
-                          "fill": "none",
-                          "pointerEvents": "painted",
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                        },
-                        "tickLabels": Object {
-                          "fill": "#4d5258",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "ticks": Object {
-                          "fill": "transparent",
-                          "size": 5,
-                          "stroke": "none",
-                          "strokeLinecap": "round",
-                          "strokeLinejoin": "round",
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "bar": Object {
-                      "barWidth": 10,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "padding": 8,
-                          "stroke": "none",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "boxplot": Object {
-                      "boxWidth": 20,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "max": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "maxLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "median": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "medianLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "min": Object {
-                          "padding": 8,
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "minLabels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q1": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q1Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "q3": Object {
-                          "fill": "#8b8d8f",
-                          "padding": 8,
-                        },
-                        "q3Labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "candlestick": Object {
-                      "candleColors": Object {
-                        "negative": "#151515",
-                        "positive": "#fff",
-                      },
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "chart": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "errorbar": Object {
-                      "borderWidth": 8,
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "group": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "width": 450,
-                    },
-                    "legend": Object {
-                      "gutter": 20,
-                      "orientation": "horizontal",
-                      "style": Object {
-                        "data": Object {
-                          "type": "square",
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                        },
-                        "title": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 2,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "titleOrientation": "top",
-                    },
-                    "line": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "opacity": 1,
-                          "stroke": "#151515",
-                          "strokeWidth": 2,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "pie": Object {
-                      "height": 230,
-                      "padding": 8,
-                      "style": Object {
-                        "data": Object {
-                          "padding": 8,
-                          "stroke": "transparent",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "stroke": "transparent",
-                        },
-                      },
-                      "width": 230,
-                    },
-                    "scatter": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "#151515",
-                          "opacity": 1,
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "labels": Object {
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 10,
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "stack": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "strokeWidth": 1,
-                        },
-                      },
-                      "width": 450,
-                    },
-                    "tooltip": Object {
-                      "cornerRadius": 0,
-                      "flyoutStyle": Object {
-                        "cornerRadius": 0,
-                        "fill": "#151515",
-                        "pointerEvents": "none",
-                        "stroke": "#151515",
-                        "strokeWidth": 0,
-                      },
-                      "pointerLength": 3,
-                      "pointerWidth": 15,
-                      "style": Object {
-                        "fill": "#ededed",
-                        "padding": 16,
-                        "pointerEvents": "none",
-                      },
-                    },
-                    "voronoi": Object {
-                      "height": 300,
-                      "padding": 50,
-                      "style": Object {
-                        "data": Object {
-                          "fill": "transparent",
-                          "stroke": "transparent",
-                          "strokeWidth": 0,
-                        },
-                        "flyout": Object {
-                          "fill": "#151515",
-                          "pointerEvents": "none",
-                          "stroke": "#151515",
-                          "strokeWidth": 1,
-                        },
-                        "labels": Object {
-                          "fill": "#ededed",
-                          "fontFamily": "overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-                          "fontSize": 14,
-                          "letterSpacing": "normal",
-                          "padding": 8,
-                          "pointerEvents": "none",
-                          "stroke": "transparent",
-                          "textAnchor": "middle",
-                        },
-                      },
-                      "width": 450,
-                    },
-                  }
-                }
-                width={200}
-              />
-            }
-          />
-        </ChartStack>
-      </Chart>
-    </div>
-  </CardBody>
-</Card>
-`;
-
 exports[`RhelGraphCard Component should render multiple states: error 1`] = `""`;
 
 exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] = `
diff --git a/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js b/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js
index b1f26621b..1cf8f1665 100644
--- a/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js
+++ b/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
+import { Chart, ChartBar } from '@patternfly/react-charts';
 import { RhelGraphCard } from '../rhelGraphCard';
 import { helpers } from '../../../common/helpers';
 
-const { breakpoints } = helpers;
-
 describe('RhelGraphCard Component', () => {
+  const { breakpoints } = helpers;
+
   it('should render a non-connected component', () => {
     const props = {};
 
@@ -41,7 +42,7 @@ describe('RhelGraphCard Component', () => {
     expect(component).toMatchSnapshot('fulfilled');
   });
 
-  it('should render breakpoint states', () => {
+  it('should have specific breakpoint styles based on state', () => {
     const props = {
       error: false,
       pending: false,
@@ -51,36 +52,60 @@ describe('RhelGraphCard Component', () => {
     };
     const component = shallow(<RhelGraphCard {...props} />);
 
-    expect(component).toMatchSnapshot('xs breakpoint');
+    expect({
+      chartHeight: component.find(Chart).prop('height'),
+      chartBarLabelComponentHeight: component.find(ChartBar).prop('labelComponent').props.height,
+      chartBarLabelComponentStyle: component.find(ChartBar).prop('labelComponent').props.style
+    }).toMatchSnapshot('xs breakpoint');
 
     component.setProps({
       currentBreakpoint: 'sm'
     });
 
-    expect(component).toMatchSnapshot('sm breakpoint');
+    expect({
+      chartHeight: component.find(Chart).prop('height'),
+      chartBarLabelComponentHeight: component.find(ChartBar).prop('labelComponent').props.height,
+      chartBarLabelComponentStyle: component.find(ChartBar).prop('labelComponent').props.style
+    }).toMatchSnapshot('sm breakpoint');
 
     component.setProps({
       currentBreakpoint: 'md'
     });
 
-    expect(component).toMatchSnapshot('md breakpoint');
+    expect({
+      chartHeight: component.find(Chart).prop('height'),
+      chartBarLabelComponentHeight: component.find(ChartBar).prop('labelComponent').props.height,
+      chartBarLabelComponentStyle: component.find(ChartBar).prop('labelComponent').props.style
+    }).toMatchSnapshot('md breakpoint');
 
     component.setProps({
       currentBreakpoint: 'lg'
     });
 
-    expect(component).toMatchSnapshot('lg breakpoint');
+    expect({
+      chartHeight: component.find(Chart).prop('height'),
+      chartBarLabelComponentHeight: component.find(ChartBar).prop('labelComponent').props.height,
+      chartBarLabelComponentStyle: component.find(ChartBar).prop('labelComponent').props.style
+    }).toMatchSnapshot('lg breakpoint');
 
     component.setProps({
       currentBreakpoint: 'xl'
     });
 
-    expect(component).toMatchSnapshot('xl breakpoint');
+    expect({
+      chartHeight: component.find(Chart).prop('height'),
+      chartBarLabelComponentHeight: component.find(ChartBar).prop('labelComponent').props.height,
+      chartBarLabelComponentStyle: component.find(ChartBar).prop('labelComponent').props.style
+    }).toMatchSnapshot('xl breakpoint');
 
     component.setProps({
       currentBreakpoint: 'xl2'
     });
 
-    expect(component).toMatchSnapshot('xl2 breakpoint');
+    expect({
+      chartHeight: component.find(Chart).prop('height'),
+      chartBarLabelComponentHeight: component.find(ChartBar).prop('labelComponent').props.height,
+      chartBarLabelComponentStyle: component.find(ChartBar).prop('labelComponent').props.style
+    }).toMatchSnapshot('xl2 breakpoint');
   });
 });