diff --git a/package.json b/package.json
index 2d6c69ab2..dfbf108ed 100644
--- a/package.json
+++ b/package.json
@@ -76,12 +76,12 @@
   },
   "dependencies": {
     "@patternfly/patternfly": "2.8.3",
-    "@patternfly/react-charts": "4.4.2",
-    "@patternfly/react-core": "3.51.0",
+    "@patternfly/react-charts": "4.5.2",
+    "@patternfly/react-core": "3.70.1",
     "@patternfly/react-icons": "3.9.3",
     "@patternfly/react-styles": "3.4.4",
-    "@patternfly/react-table": "2.13.19",
-    "@patternfly/react-tokens": "2.6.3",
+    "@patternfly/react-table": "2.14.11",
+    "@patternfly/react-tokens": "2.6.9",
     "@redhat-cloud-services/frontend-components": "0.0.7",
     "@redhat-cloud-services/frontend-components-utilities": "0.0.7",
     "axios": "^0.19.0",
@@ -92,6 +92,7 @@
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
+    "react-breakpoints": "^3.0.3",
     "react-dom": "^16.8.6",
     "react-i18next": "^10.11.1",
     "react-redux": "^7.1.0",
diff --git a/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap b/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap
index 847bd7971..93d63594c 100644
--- a/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap
+++ b/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap
@@ -3,5 +3,74 @@
 exports[`GraphHelpers should have specific functions: helpers 1`] = `
 Object {
   "convertGraphData": [Function],
+  "getGraphHeight": [Function],
+  "getTooltipDimensions": [Function],
+  "getTooltipFontSize": [Function],
 }
 `;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: lg graph height 1`] = `200`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: md graph height 1`] = `400`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: sm graph height 1`] = `400`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: xl graph height 1`] = `200`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: xl2 graph height 1`] = `200`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: xs graph height 1`] = `400`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: lg tooltip dimensions 1`] = `
+Object {
+  "height": 40,
+  "width": 120,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: md tooltip dimensions 1`] = `
+Object {
+  "height": 40,
+  "width": 140,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: sm tooltip dimensions 1`] = `
+Object {
+  "height": 50,
+  "width": 180,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: xl tooltip dimensions 1`] = `
+Object {
+  "height": 30,
+  "width": 90,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: xl2 tooltip dimensions 1`] = `
+Object {
+  "height": 20,
+  "width": 80,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: xs tooltip dimensions 1`] = `
+Object {
+  "height": 60,
+  "width": 200,
+}
+`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: lg tooltip font sizes 1`] = `12`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: md tooltip font sizes 1`] = `14`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: sm tooltip font sizes 1`] = `14`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: xl tooltip font sizes 1`] = `8`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: xl2 tooltip font sizes 1`] = `8`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: xs tooltip font sizes 1`] = `14`;
diff --git a/src/common/__tests__/__snapshots__/helpers.test.js.snap b/src/common/__tests__/__snapshots__/helpers.test.js.snap
index 882ebe575..849b2f5b8 100644
--- a/src/common/__tests__/__snapshots__/helpers.test.js.snap
+++ b/src/common/__tests__/__snapshots__/helpers.test.js.snap
@@ -8,6 +8,14 @@ Object {
   "REVIEW_MODE": false,
   "TEST_MODE": true,
   "UI_VERSION": "0.0.0.0000000",
+  "breakpoints": Object {
+    "lg": 992,
+    "md": 768,
+    "sm": 576,
+    "xl": 1200,
+    "xl2": 1450,
+    "xs": 0,
+  },
   "generateId": [Function],
   "noop": [Function],
   "noopPromise": Promise {},
diff --git a/src/common/__tests__/graphHelpers.test.js b/src/common/__tests__/graphHelpers.test.js
index 06d7c7c4e..f5ceda720 100644
--- a/src/common/__tests__/graphHelpers.test.js
+++ b/src/common/__tests__/graphHelpers.test.js
@@ -1,7 +1,34 @@
-import { graphHelpers } from '../graphHelpers';
+import { graphHelpers, getGraphHeight, getTooltipDimensions, getTooltipFontSize } from '../graphHelpers';
+import { helpers } from '../helpers';
+
+const { breakpoints } = helpers;
 
 describe('GraphHelpers', () => {
   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');
+    expect(getGraphHeight(breakpoints, 'md')).toMatchSnapshot('md graph height');
+    expect(getGraphHeight(breakpoints, 'lg')).toMatchSnapshot('lg graph height');
+    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');
+    expect(getTooltipDimensions(breakpoints, 'md')).toMatchSnapshot('md tooltip dimensions');
+    expect(getTooltipDimensions(breakpoints, 'lg')).toMatchSnapshot('lg tooltip dimensions');
+    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');
+    expect(getTooltipFontSize(breakpoints, 'md')).toMatchSnapshot('md tooltip font sizes');
+    expect(getTooltipFontSize(breakpoints, 'lg')).toMatchSnapshot('lg tooltip font sizes');
+    expect(getTooltipFontSize(breakpoints, 'xl')).toMatchSnapshot('xl tooltip font sizes');
+    expect(getTooltipFontSize(breakpoints, 'xl2')).toMatchSnapshot('xl2 tooltip font sizes');
+  });
 });
diff --git a/src/common/graphHelpers.js b/src/common/graphHelpers.js
index 3ef6c1719..e8780a99d 100644
--- a/src/common/graphHelpers.js
+++ b/src/common/graphHelpers.js
@@ -2,8 +2,8 @@ const convertGraphData = () => {
   // todo: convert passed params to consumable chart data
 
   return [
-    { x: 'May 25', y: 1 },
-    { x: 'May 26', y: 1 },
+    { x: 'May 25', y: 30, label: '30 Sockets on May 25' },
+    { x: 'May 26', y: 60, label: '60 Sockets on May 26 \r\n +30 from previous day' },
     { x: 'May 27', y: 1 },
     { x: 'May 28', y: 1 },
     { x: 'May 29', y: 2 },
@@ -36,6 +36,45 @@ const convertGraphData = () => {
   ];
 };
 
-const graphHelpers = { convertGraphData };
+const getGraphHeight = (breakpoints, currentBreakpoint) =>
+  (breakpoints[currentBreakpoint] > breakpoints.md && 200) || 400;
 
-export { graphHelpers as default, graphHelpers, convertGraphData };
+const getTooltipDimensions = (breakpoints, currentBreakpoint) => {
+  if (breakpoints[currentBreakpoint] < breakpoints.sm) {
+    return { height: 60, width: 200 };
+  }
+  if (breakpoints[currentBreakpoint] < breakpoints.md) {
+    return { height: 50, width: 180 };
+  }
+  if (breakpoints[currentBreakpoint] < breakpoints.lg) {
+    return { height: 40, width: 140 };
+  }
+  if (breakpoints[currentBreakpoint] < breakpoints.xl) {
+    return { height: 40, width: 120 };
+  }
+  if (breakpoints[currentBreakpoint] < breakpoints.xl2) {
+    return { height: 30, width: 90 };
+  }
+  return { height: 20, width: 80 };
+};
+
+const getTooltipFontSize = (breakpoints, currentBreakpoint) => {
+  if (breakpoints[currentBreakpoint] > breakpoints.lg) {
+    return 8;
+  }
+  if (breakpoints[currentBreakpoint] > breakpoints.md) {
+    return 12;
+  }
+  return 14;
+};
+
+const graphHelpers = { convertGraphData, getGraphHeight, getTooltipDimensions, getTooltipFontSize };
+
+export {
+  graphHelpers as default,
+  graphHelpers,
+  convertGraphData,
+  getGraphHeight,
+  getTooltipDimensions,
+  getTooltipFontSize
+};
diff --git a/src/common/helpers.js b/src/common/helpers.js
index 5edc3d21a..9a56cec0d 100644
--- a/src/common/helpers.js
+++ b/src/common/helpers.js
@@ -1,3 +1,12 @@
+import {
+  global_breakpoint_xs as globalBreakpointXs,
+  global_breakpoint_sm as globalBreakpointSm,
+  global_breakpoint_md as globalBreakpointMd,
+  global_breakpoint_lg as globalBreakpointLg,
+  global_breakpoint_xl as globalBreakpointXl,
+  global_breakpoint_2xl as globalBreakpoint2xl
+} from '@patternfly/react-tokens';
+
 const generateId = prefix =>
   `${prefix || 'generatedid'}-${(process.env.REACT_APP_ENV !== 'test' && Math.ceil(1e5 * Math.random())) || ''}`;
 
@@ -19,6 +28,15 @@ const PUBLIC_URL = process.env.PUBLIC_URL || '/';
 
 const UI_VERSION = process.env.REACT_APP_UI_VERSION;
 
+const breakpoints = {
+  xs: parseInt(globalBreakpointXs.value, 10),
+  sm: parseInt(globalBreakpointSm.value, 10),
+  md: parseInt(globalBreakpointMd.value, 10),
+  lg: parseInt(globalBreakpointLg.value, 10),
+  xl: parseInt(globalBreakpointXl.value, 10),
+  xl2: parseInt(globalBreakpoint2xl.value, 10)
+};
+
 const helpers = {
   generateId,
   noop,
@@ -29,7 +47,8 @@ const helpers = {
   REVIEW_MODE,
   TEST_MODE,
   PUBLIC_URL,
-  UI_VERSION
+  UI_VERSION,
+  breakpoints
 };
 
 export { helpers as default, helpers };
diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
index 9df6ed890..501787041 100644
--- a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
+++ b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -55,109 +55,123 @@ exports[`Authorization Component should render a non-connected component error:
   }
 >
   <PageLayout>
-    <Page
-      breadcrumb={null}
-      className="layout-pf curiosity"
-      header={null}
-      isManagedSidebar={false}
-      onPageResize={null}
-      sidebar={null}
-      skipToContent={null}
+    <ReactBreakpoints
+      breakpointUnit="px"
+      breakpoints={
+        Object {
+          "lg": 992,
+          "md": 768,
+          "sm": 576,
+          "xl": 1200,
+          "xl2": 1450,
+          "xs": 0,
+        }
+      }
+      debounceDelay={50}
+      debounceResize={false}
+      snapMode={true}
     >
-      <div
-        className="pf-c-page layout-pf curiosity"
+      <Page
+        breadcrumb={null}
+        className="layout-pf curiosity"
+        header={null}
+        isManagedSidebar={false}
+        onPageResize={[Function]}
+        sidebar={null}
+        skipToContent={null}
       >
-        <main
-          className="pf-c-page__main"
-          role="main"
+        <div
+          className="pf-c-page layout-pf curiosity"
         >
-          <PageSection
-            className=""
-            noPadding={true}
-            noPaddingMobile={false}
-            variant="default"
+          <main
+            className="pf-c-page__main"
+            role="main"
           >
-            <section
-              className="pf-c-page__main-section pf-m-no-padding"
+            <PageSection
+              noPadding={true}
             >
-              <PageHeader>
-                <section
-                  className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
-                  widget-type="InsightsPageHeader"
-                >
-                  <PageHeaderTitle
-                    title="Unauthorized"
+              <section
+                className="pf-c-page__main-section pf-m-no-padding"
+              >
+                <PageHeader>
+                  <section
+                    className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
+                    widget-type="InsightsPageHeader"
                   >
-                    <Title
-                      className=""
-                      size="2xl"
-                      widget-type="InsightsPageHeaderTitle"
+                    <PageHeaderTitle
+                      title="Unauthorized"
                     >
-                      <h1
-                        className="pf-c-title pf-m-2xl"
+                      <Title
+                        className=""
+                        size="2xl"
                         widget-type="InsightsPageHeaderTitle"
                       >
-                         
-                        Unauthorized
-                         
-                      </h1>
-                    </Title>
-                  </PageHeaderTitle>
-                </section>
-              </PageHeader>
-              <EmptyState
-                className="fadein"
-                variant="full"
-              >
-                <div
-                  className="pf-c-empty-state fadein"
+                        <h1
+                          className="pf-c-title pf-m-2xl"
+                          widget-type="InsightsPageHeaderTitle"
+                        >
+                           
+                          Unauthorized
+                           
+                        </h1>
+                      </Title>
+                    </PageHeaderTitle>
+                  </section>
+                </PageHeader>
+                <EmptyState
+                  className="fadein"
+                  variant="full"
                 >
-                  <EmptyStateIcon
-                    icon={[Function]}
+                  <div
+                    className="pf-c-empty-state fadein"
                   >
-                    <BanIcon
-                      aria-hidden="true"
-                      className="pf-c-empty-state__icon"
-                      color="currentColor"
-                      size="sm"
-                      title={null}
+                    <EmptyStateIcon
+                      icon={[Function]}
                     >
-                      <svg
+                      <BanIcon
                         aria-hidden="true"
-                        aria-labelledby={null}
                         className="pf-c-empty-state__icon"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style={
-                          Object {
-                            "verticalAlign": "-0.125em",
+                        color="currentColor"
+                        size="sm"
+                        title={null}
+                      >
+                        <svg
+                          aria-hidden="true"
+                          aria-labelledby={null}
+                          className="pf-c-empty-state__icon"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          style={
+                            Object {
+                              "verticalAlign": "-0.125em",
+                            }
                           }
-                        }
-                        viewBox="0 0 512 512"
-                        width="1em"
+                          viewBox="0 0 512 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
+                            transform=""
+                          />
+                        </svg>
+                      </BanIcon>
+                    </EmptyStateIcon>
+                    <EmptyStateBody>
+                      <p
+                        className="pf-c-empty-state__body"
                       >
-                        <path
-                          d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
-                          transform=""
-                        />
-                      </svg>
-                    </BanIcon>
-                  </EmptyStateIcon>
-                  <EmptyStateBody>
-                    <p
-                      className="pf-c-empty-state__body"
-                    >
-                      You do not have permission to access reporting. Contact your administrator.
-                    </p>
-                  </EmptyStateBody>
-                </div>
-              </EmptyState>
-            </section>
-          </PageSection>
-        </main>
-      </div>
-    </Page>
+                        You do not have permission to access reporting. Contact your administrator.
+                      </p>
+                    </EmptyStateBody>
+                  </div>
+                </EmptyState>
+              </section>
+            </PageSection>
+          </main>
+        </div>
+      </Page>
+    </ReactBreakpoints>
   </PageLayout>
 </Authentication>
 `;
diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap
index 1b0fef14c..e8068577c 100644
--- a/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap
+++ b/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap
@@ -2,40 +2,54 @@
 
 exports[`PageLayout Component should render a basic component: basic 1`] = `
 <PageLayout>
-  <Page
-    breadcrumb={null}
-    className="layout-pf curiosity"
-    header={null}
-    isManagedSidebar={false}
-    onPageResize={null}
-    sidebar={null}
-    skipToContent={null}
+  <ReactBreakpoints
+    breakpointUnit="px"
+    breakpoints={
+      Object {
+        "lg": 992,
+        "md": 768,
+        "sm": 576,
+        "xl": 1200,
+        "xl2": 1450,
+        "xs": 0,
+      }
+    }
+    debounceDelay={50}
+    debounceResize={false}
+    snapMode={true}
   >
-    <div
-      className="pf-c-page layout-pf curiosity"
+    <Page
+      breadcrumb={null}
+      className="layout-pf curiosity"
+      header={null}
+      isManagedSidebar={false}
+      onPageResize={[Function]}
+      sidebar={null}
+      skipToContent={null}
     >
-      <main
-        className="pf-c-page__main"
-        role="main"
+      <div
+        className="pf-c-page layout-pf curiosity"
       >
-        <PageSection
-          className=""
-          noPadding={true}
-          noPaddingMobile={false}
-          variant="default"
+        <main
+          className="pf-c-page__main"
+          role="main"
         >
-          <section
-            className="pf-c-page__main-section pf-m-no-padding"
+          <PageSection
+            noPadding={true}
           >
-            <span
-              className="test"
+            <section
+              className="pf-c-page__main-section pf-m-no-padding"
             >
-              lorem
-            </span>
-          </section>
-        </PageSection>
-      </main>
-    </div>
-  </Page>
+              <span
+                className="test"
+              >
+                lorem
+              </span>
+            </section>
+          </PageSection>
+        </main>
+      </div>
+    </Page>
+  </ReactBreakpoints>
 </PageLayout>
 `;
diff --git a/src/components/pageLayout/pageLayout.js b/src/components/pageLayout/pageLayout.js
index c8a7374e3..9d93d1b96 100644
--- a/src/components/pageLayout/pageLayout.js
+++ b/src/components/pageLayout/pageLayout.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ReactBreakpoints from 'react-breakpoints';
 import { Page, PageSection } from '@patternfly/react-core';
+import { helpers } from '../../common/helpers';
 
 const PageLayout = ({ children }) => (
-  <Page className="layout-pf curiosity">
-    <PageSection noPadding>{children}</PageSection>
-  </Page>
+  <ReactBreakpoints breakpoints={helpers.breakpoints}>
+    <Page className="layout-pf curiosity">
+      <PageSection noPadding>{children}</PageSection>
+    </Page>
+  </ReactBreakpoints>
 );
 
 PageLayout.propTypes = {
diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
index c77e879f6..970f72aee 100644
--- a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
+++ b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
@@ -2,6 +2,8 @@
 
 exports[`RhelGraphCard Component should render a non-connected component: non-connected 1`] = `
 <RhelGraphCard
+  breakpoints={Object {}}
+  currentBreakpoint=""
   error={false}
   fulfilled={false}
   getGraphReports={[Function]}
@@ -31,6 +33,7 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
               className="pf-c-card__actions"
             >
               <Dropdown
+                autoFocus={true}
                 className=""
                 direction="down"
                 dropdownItems={Array []}
@@ -58,6 +61,7 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
                 }
               >
                 <DropdownWithContext
+                  autoFocus={true}
                   className=""
                   direction="down"
                   dropdownItems={Array []}
@@ -177,6 +181,3414 @@ 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`] = `
@@ -189,6 +3601,7 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
     </h2>
     <CardActions>
       <Dropdown
+        autoFocus={true}
         className=""
         direction="down"
         dropdownItems={Array []}
@@ -234,19 +3647,22 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
             ],
           }
         }
-        height={200}
+        height={400}
       >
         <ChartStack>
           <ChartBar
             data={
               Array [
                 Object {
+                  "label": "30 Sockets on May 25",
                   "x": "May 25",
-                  "y": 1,
+                  "y": 30,
                 },
                 Object {
+                  "label": "60 Sockets on May 26 
+ +30 from previous day",
                   "x": "May 26",
-                  "y": 1,
+                  "y": 60,
                 },
                 Object {
                   "x": "May 27",
@@ -366,6 +3782,375 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
                 },
               ]
             }
+            labelComponent={
+              <ChartTooltip
+                height={20}
+                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={80}
+              />
+            }
           />
         </ChartStack>
       </Chart>
@@ -384,6 +4169,7 @@ exports[`RhelGraphCard Component should render multiple states: pending 1`] = `
     </h2>
     <CardActions>
       <Dropdown
+        autoFocus={true}
         className=""
         direction="down"
         dropdownItems={Array []}
diff --git a/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js b/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js
index 2138988c4..b1f26621b 100644
--- a/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js
+++ b/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { RhelGraphCard } from '../rhelGraphCard';
+import { helpers } from '../../../common/helpers';
+
+const { breakpoints } = helpers;
 
 describe('RhelGraphCard Component', () => {
   it('should render a non-connected component', () => {
@@ -37,4 +40,47 @@ describe('RhelGraphCard Component', () => {
 
     expect(component).toMatchSnapshot('fulfilled');
   });
+
+  it('should render breakpoint states', () => {
+    const props = {
+      error: false,
+      pending: false,
+      fulfilled: true,
+      breakpoints,
+      currentBreakpoint: 'xs'
+    };
+    const component = shallow(<RhelGraphCard {...props} />);
+
+    expect(component).toMatchSnapshot('xs breakpoint');
+
+    component.setProps({
+      currentBreakpoint: 'sm'
+    });
+
+    expect(component).toMatchSnapshot('sm breakpoint');
+
+    component.setProps({
+      currentBreakpoint: 'md'
+    });
+
+    expect(component).toMatchSnapshot('md breakpoint');
+
+    component.setProps({
+      currentBreakpoint: 'lg'
+    });
+
+    expect(component).toMatchSnapshot('lg breakpoint');
+
+    component.setProps({
+      currentBreakpoint: 'xl'
+    });
+
+    expect(component).toMatchSnapshot('xl breakpoint');
+
+    component.setProps({
+      currentBreakpoint: 'xl2'
+    });
+
+    expect(component).toMatchSnapshot('xl2 breakpoint');
+  });
 });
diff --git a/src/components/rhelGraphCard/rhelGraphCard.js b/src/components/rhelGraphCard/rhelGraphCard.js
index 0091f9aa0..949241cea 100644
--- a/src/components/rhelGraphCard/rhelGraphCard.js
+++ b/src/components/rhelGraphCard/rhelGraphCard.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withBreakpoints } from 'react-breakpoints';
 import {
   Card,
   CardHead,
@@ -9,7 +10,7 @@ import {
   DropdownToggle,
   DropdownPosition
 } from '@patternfly/react-core';
-import { Chart, ChartBar, ChartStack } from '@patternfly/react-charts';
+import { Chart, ChartBar, ChartBaseTheme, ChartLabel, ChartStack, ChartTooltip } from '@patternfly/react-charts';
 import { connectTranslate, reduxActions } from '../../redux';
 import { helpers } from '../../common/helpers';
 import { graphHelpers } from '../../common/graphHelpers';
@@ -36,7 +37,7 @@ class RhelGraphCard extends React.Component {
   };
 
   render() {
-    const { error, fulfilled, graphData, pending, t } = this.props;
+    const { error, fulfilled, graphData, pending, t, breakpoints, currentBreakpoint } = this.props;
     const { isOpen } = this.state;
 
     if (error) {
@@ -52,6 +53,32 @@ class RhelGraphCard extends React.Component {
       </DropdownToggle>
     );
 
+    // heights are breakpoint specific since they are scaled via svg
+    const graphHeight = graphHelpers.getGraphHeight(breakpoints, currentBreakpoint);
+    const tooltipDimensions = graphHelpers.getTooltipDimensions(breakpoints, currentBreakpoint);
+
+    const tooltipTheme = {
+      ...ChartBaseTheme,
+      tooltip: {
+        ...ChartBaseTheme.tooltip,
+        pointerLength: 3,
+        pointerWidth: 15
+      }
+    };
+    const textStyle = {
+      // note: fontSize will also determine vertical space between tooltip tspans
+      fontSize: graphHelpers.getTooltipFontSize(breakpoints, currentBreakpoint)
+    };
+
+    const chartTooltip = (
+      <ChartTooltip
+        {...tooltipDimensions}
+        style={textStyle}
+        theme={tooltipTheme}
+        labelComponent={<ChartLabel dy={-1} className="curiosity-usage-graph-tooltip-text" />}
+      />
+    );
+
     // todo: correct pending/loading display
     return (
       <Card className="curiosity-usage-graph fadein">
@@ -77,9 +104,9 @@ class RhelGraphCard extends React.Component {
         {fulfilled && (
           <CardBody>
             <div className="stack-chart-container">
-              <Chart height={200} domainPadding={{ x: [10, 2], y: [1, 1] }}>
+              <Chart height={graphHeight} domainPadding={{ x: [10, 2], y: [1, 1] }}>
                 <ChartStack>
-                  <ChartBar data={chartData} />
+                  <ChartBar data={chartData} labelComponent={chartTooltip} />
                 </ChartStack>
               </Chart>
             </div>
@@ -98,7 +125,16 @@ RhelGraphCard.propTypes = {
     usage: PropTypes.array
   }),
   pending: PropTypes.bool,
-  t: PropTypes.func
+  t: PropTypes.func,
+  breakpoints: PropTypes.shape({
+    xs: PropTypes.number,
+    sm: PropTypes.number,
+    md: PropTypes.number,
+    lg: PropTypes.number,
+    xl: PropTypes.number,
+    xl2: PropTypes.number
+  }),
+  currentBreakpoint: PropTypes.string
 };
 
 RhelGraphCard.defaultProps = {
@@ -109,7 +145,9 @@ RhelGraphCard.defaultProps = {
     usage: []
   },
   pending: false,
-  t: helpers.noopTranslate
+  t: helpers.noopTranslate,
+  breakpoints: {},
+  currentBreakpoint: ''
 };
 
 const mapStateToProps = state => ({
@@ -120,6 +158,6 @@ const mapDispatchToProps = dispatch => ({
   getGraphReports: () => dispatch(reduxActions.rhel.getGraphReports())
 });
 
-const ConnectedRhelGraphCard = connectTranslate(mapStateToProps, mapDispatchToProps)(RhelGraphCard);
+const ConnectedRhelGraphCard = connectTranslate(mapStateToProps, mapDispatchToProps)(withBreakpoints(RhelGraphCard));
 
 export { ConnectedRhelGraphCard as default, ConnectedRhelGraphCard, RhelGraphCard };
diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
index 327afc6ed..6d17b2b3e 100644
--- a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
+++ b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -7,13 +7,8 @@ exports[`RhelView Component should render a non-connected component: non-connect
       title="Red Hat Enterprise Linux"
     />
   </PageHeader>
-  <PageSection
-    className=""
-    noPadding={false}
-    noPaddingMobile={false}
-    variant="default"
-  >
-    <Connect(RhelGraphCard) />
+  <PageSection>
+    <Connect(withBreakpoints(RhelGraphCard)) />
   </PageSection>
 </Fragment>
 `;
diff --git a/src/styles/_app.scss b/src/styles/_app.scss
index 4743a8280..e69de29bb 100644
--- a/src/styles/_app.scss
+++ b/src/styles/_app.scss
@@ -1,55 +0,0 @@
-.curiosity-usage-graph .pf-c-card__head {
-  border-bottom: var(--pf-global--BorderWidth--sm) solid
-    var(--pf-global--BorderColor--100);
-}
-
-.curiosity-usage-graph .stack-chart-container svg {
-  > g:nth-child(2) {
-    > g {
-      display: none;
-    }
-    > g:nth-child(5n-3) {
-      display: block;
-    }
-  }
-  @media (min-width: $pf-global--breakpoint--xs) and (max-width: $pf-global--breakpoint--sm) {
-    tspan {
-      font-size: 14px !important;
-    }
-  }
-  @media (min-width: $pf-global--breakpoint--sm) and (max-width: $pf-global--breakpoint--md) {
-    margin-top: -15px;
-    margin-bottom: -10px;
-    tspan {
-      font-size: 12px !important;
-    }
-  }
-  @media (min-width: $pf-global--breakpoint--md) and (max-width: $pf-global--breakpoint--lg) {
-    margin-top: -25px;
-    margin-bottom: -20px;
-    tspan {
-      font-size: 10px !important;
-    }
-  }
-  @media (min-width: $pf-global--breakpoint--lg) and (max-width: $pf-global--breakpoint--xl) {
-    margin-top: -35px;
-    margin-bottom: -20px;
-    tspan {
-      font-size: 8px !important;
-    }
-  }
-  @media (min-width: $pf-global--breakpoint--xl) and (max-width: 1500px) {
-    margin-top: -50px;
-    margin-bottom: -20px;
-    tspan {
-      font-size: 6px !important;
-    }
-  }
-  @media (min-width: 1500px) {
-    margin-top: -70px;
-    margin-bottom: -40px;
-    tspan {
-      font-size: 6px !important;
-    }
-  }
-}
diff --git a/src/styles/_usage-graph.scss b/src/styles/_usage-graph.scss
new file mode 100644
index 000000000..4743a8280
--- /dev/null
+++ b/src/styles/_usage-graph.scss
@@ -0,0 +1,55 @@
+.curiosity-usage-graph .pf-c-card__head {
+  border-bottom: var(--pf-global--BorderWidth--sm) solid
+    var(--pf-global--BorderColor--100);
+}
+
+.curiosity-usage-graph .stack-chart-container svg {
+  > g:nth-child(2) {
+    > g {
+      display: none;
+    }
+    > g:nth-child(5n-3) {
+      display: block;
+    }
+  }
+  @media (min-width: $pf-global--breakpoint--xs) and (max-width: $pf-global--breakpoint--sm) {
+    tspan {
+      font-size: 14px !important;
+    }
+  }
+  @media (min-width: $pf-global--breakpoint--sm) and (max-width: $pf-global--breakpoint--md) {
+    margin-top: -15px;
+    margin-bottom: -10px;
+    tspan {
+      font-size: 12px !important;
+    }
+  }
+  @media (min-width: $pf-global--breakpoint--md) and (max-width: $pf-global--breakpoint--lg) {
+    margin-top: -25px;
+    margin-bottom: -20px;
+    tspan {
+      font-size: 10px !important;
+    }
+  }
+  @media (min-width: $pf-global--breakpoint--lg) and (max-width: $pf-global--breakpoint--xl) {
+    margin-top: -35px;
+    margin-bottom: -20px;
+    tspan {
+      font-size: 8px !important;
+    }
+  }
+  @media (min-width: $pf-global--breakpoint--xl) and (max-width: 1500px) {
+    margin-top: -50px;
+    margin-bottom: -20px;
+    tspan {
+      font-size: 6px !important;
+    }
+  }
+  @media (min-width: 1500px) {
+    margin-top: -70px;
+    margin-bottom: -40px;
+    tspan {
+      font-size: 6px !important;
+    }
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a67d54abf..a262128b2 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,4 +7,5 @@
 .curiosity {
   @import 'app';
   @import 'common';
+  @import 'usage-graph';
 }
diff --git a/tests/__snapshots__/i18n.test.js.snap b/tests/__snapshots__/i18n.test.js.snap
index fbbf74354..ffcf3dac0 100644
--- a/tests/__snapshots__/i18n.test.js.snap
+++ b/tests/__snapshots__/i18n.test.js.snap
@@ -5,12 +5,12 @@ exports[`i18n locale should generate a predictable pot output snapshot: pot outp
 msgstr \\"\\"
 \\"Content-Type: text/plain; charset=UTF-8\\\\n\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:59
+#: src/components/rhelGraphCard/rhelGraphCard.js:86
 msgctxt \\"Daily CPU socket usage\\"
 msgid \\"curiosity-graph.heading\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:51
+#: src/components/rhelGraphCard/rhelGraphCard.js:52
 msgctxt \\"Last 30 Days\\"
 msgid \\"curiosity-graph.dropdownDefault\\"
 msgstr \\"\\"
diff --git a/yarn.lock b/yarn.lock
index 5ad4dfbfd..d0c4910c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1154,22 +1154,22 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@patternfly/patternfly@2.14.0":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-2.14.0.tgz#ca737b03a6c8aecce65662d52e0801d558fb06ff"
-  integrity sha512-ujZjwwJRRn1EUaewM0oK7x+6EuHIBGZNdxe9lUu9eOSg+E2U7k6WJIHG1ZYZxDIEjC7d3EkiMQA4gkzb9f3Luw==
+"@patternfly/patternfly@2.17.3":
+  version "2.17.3"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-2.17.3.tgz#ee8de7081f3cc4cbcb1a54de41204e53f3f5ac54"
+  integrity sha512-AN5onFap7jduhOUi/Qe/i+b7d8bsIHFU4Miss3gt16NNCWx5vyhS9jqlg/0eR41NHtebVm1RIAar/z319Mmjhw==
 
 "@patternfly/patternfly@2.8.3":
   version "2.8.3"
   resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-2.8.3.tgz#914e09f4512addc6712d9f963c3e444860bed33f"
   integrity sha512-x+zxOCEOtxqoLwBQK+I2BB1CGY/uX40uFpE4RMUPv75W8BLegC0jvXHMM+BK5eP3680AMfVZn5xbfQVAVzyT1A==
 
-"@patternfly/react-charts@4.4.2":
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-4.4.2.tgz#778c297e6f614231c2f82b9366b03b36c95e6846"
-  integrity sha512-ha6pthslDiIXNDTkc/JsrQR2aBnFmqjiZS/woRG+3XYbAFe0+D97uZloAtfSSP1IQ9Ci1dHj4I0/sRRpK7jT8w==
+"@patternfly/react-charts@4.5.2":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-4.5.2.tgz#61d84e978147dc7ed23f58ccfa97fd20be347df0"
+  integrity sha512-/QLjMjvUXE3emLc7MYwnV0eXQT065srAYtnVs0Kzbg5iOSzwhOf7HDPRUlAZggUry0+3BZZ00ha3hGjzmsxFlg==
   dependencies:
-    "@patternfly/react-styles" "^3.4.4"
+    "@patternfly/react-styles" "^3.5.3"
   optionalDependencies:
     "@types/lodash" "^4.14.132"
     "@types/victory" "^31.0.18"
@@ -1179,14 +1179,14 @@
     victory-core "^32.2.3"
     victory-legend "^32.2.3"
 
-"@patternfly/react-core@3.51.0", "@patternfly/react-core@^3.51.0":
-  version "3.51.0"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-3.51.0.tgz#3f6e3d638ef5cb7119970badecfe6046c3c4c5a1"
-  integrity sha512-ClcwhtIXNB/tiwvX+KYdGlAIeDtXpJgL0eOkxmUZF6dt3qitPYx19q2Gg0Nq+J4Rxg1YMJjZv4hgM7cqf69Q0A==
+"@patternfly/react-core@3.70.1", "@patternfly/react-core@^3.70.1":
+  version "3.70.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-3.70.1.tgz#6012589fdb515d622dc07fbded93ab89c2673494"
+  integrity sha512-PwsT3DJtZhj+JIhXq8dXD3bURcvH45GRfAyGsEDVJF2XH8G9Z6BI+51IMo2HN46FSk6xXGPxnQ0Wr9oTzE4NOg==
   dependencies:
-    "@patternfly/react-icons" "^3.10.4"
-    "@patternfly/react-styles" "^3.4.4"
-    "@patternfly/react-tokens" "^2.6.3"
+    "@patternfly/react-icons" "^3.10.10"
+    "@patternfly/react-styles" "^3.5.3"
+    "@patternfly/react-tokens" "^2.6.9"
     "@tippy.js/react" "^1.1.1"
     emotion "^9.2.9"
     exenv "^1.2.2"
@@ -1199,14 +1199,14 @@
   dependencies:
     "@fortawesome/free-brands-svg-icons" "^5.8.1"
 
-"@patternfly/react-icons@^3.10.4":
-  version "3.10.4"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-3.10.4.tgz#c472048b66424b4ba7674a8b96704313c281cd93"
-  integrity sha512-SWB2aodjwYsypbAoMO5mAzR1EGEBR7HkZvXYGKDm/AGcx4seCa4EacCvVqWPYrepnzceiI2PPP/CBC5eOcFVrQ==
+"@patternfly/react-icons@^3.10.10":
+  version "3.10.10"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-3.10.10.tgz#a16451896ed720967c85dd7c236fa8d6a044e28e"
+  integrity sha512-UbTJxGtaaruFG0QhdJi3QlTzRWjK/dBbg35gdGe5EReUVHM4X1hJ1cOID/6ntEna45yCpeb43fpLRUYY5daMiw==
   dependencies:
     "@fortawesome/free-brands-svg-icons" "^5.8.1"
 
-"@patternfly/react-styles@3.4.4", "@patternfly/react-styles@^3.4.4":
+"@patternfly/react-styles@3.4.4":
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-3.4.4.tgz#1f550034e3995fd1a8982269f26490312f155667"
   integrity sha512-qulf1AiS+cWc37io40699vPFZSQFtnMjI6ZNytX52MAQnthCa4h3aRQXHKcvgbcfP4MnE9/kjIOpmIvhCBJYrQ==
@@ -1225,24 +1225,43 @@
     resolve-from "^4.0.0"
     typescript "3.4.5"
 
-"@patternfly/react-table@2.13.19":
-  version "2.13.19"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-2.13.19.tgz#a62513ee882af20ca6e99653201b8917972fd506"
-  integrity sha512-EXDoI0yTYvpei18GKgKQSHZnjIEcWXoIWgvc0wqdL4tMQ4MRRUBnngKp49yjeS2SAzMbA8Kg7lCb+diDVh0tZQ==
+"@patternfly/react-styles@^3.5.3":
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-3.5.3.tgz#b4ec81d660e394ad0d2fc12badcba84f76c50d75"
+  integrity sha512-SQEyP+tS+89k8ZzKNxcGHxmDUs+M8zW1NOdmq8lPOvIuWJhkv3HeiXzB9VH/Oq+NiZtqeHjDTIZ9MK4TVv3EYg==
   dependencies:
-    "@patternfly/patternfly" "2.14.0"
-    "@patternfly/react-core" "^3.51.0"
-    "@patternfly/react-icons" "^3.10.4"
-    "@patternfly/react-styles" "^3.4.4"
-    "@patternfly/react-tokens" "^2.6.3"
+    "@babel/helper-plugin-utils" "^7.0.0-beta.48"
+    camel-case "^3.0.0"
+    css "^2.2.3"
+    cssom "^0.3.4"
+    cssstyle "^0.3.1"
+    emotion "^9.2.9"
+    emotion-server "^9.2.9"
+    fbjs-scripts "^0.8.3"
+    fs-extra "^6.0.1"
+    jsdom "^15.1.0"
+    relative "^3.0.2"
+    resolve-from "^4.0.0"
+    typescript "3.4.5"
+
+"@patternfly/react-table@2.14.11":
+  version "2.14.11"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-2.14.11.tgz#77d8126344d52bd092d715f42cf34629dafeff9d"
+  integrity sha512-g0lqU93k9vDKoE59gbjYp27ncwo1tEgq7K10v7ICJg67LcRXltMWclyoXXlpJ13hpgebFxhlewqDppeL/HFpzA==
+  dependencies:
+    "@patternfly/patternfly" "2.17.3"
+    "@patternfly/react-core" "^3.70.1"
+    "@patternfly/react-icons" "^3.10.10"
+    "@patternfly/react-styles" "^3.5.3"
+    "@patternfly/react-tokens" "^2.6.9"
     classnames "^2.2.5"
     exenv "^1.2.2"
     lodash-es "^4.2.1"
 
-"@patternfly/react-tokens@2.6.3", "@patternfly/react-tokens@^2.6.3":
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-2.6.3.tgz#d6a554ef03ddcf1e11ca16cc74cc41388b9a5fbf"
-  integrity sha512-egZEj1pQyfe4eH/Pk0WtWF+1NT5GGrn63UaSFpxhMUD8uJRY5jn6/ZfOdhmXxQsqiP6gFKyJ5llcQowxZY0x4w==
+"@patternfly/react-tokens@2.6.9", "@patternfly/react-tokens@^2.6.9":
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-2.6.9.tgz#e1cb0d77f6737d9669ba41bcaf0610ef1148176b"
+  integrity sha512-hpJEtupHgrm0V7Lyywq2R+UkcQAxNWjcZDLUx2rOe1haCZEdzRk3kf2CuPsqf0Jai9Wuu7J6K8jXXu5ZGUFWZA==
 
 "@redhat-cloud-services/frontend-components-utilities@0.0.7", "@redhat-cloud-services/frontend-components-utilities@~0.0.7":
   version "0.0.7"
@@ -2085,7 +2104,7 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
-asap@~2.0.6:
+asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -3837,6 +3856,11 @@ core-js@3.0.1:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.0.1.tgz#1343182634298f7f38622f95e73f54e48ddf4738"
   integrity sha512-sco40rF+2KlE0ROMvydjkrVMMG1vYilP2ALoRXcYR4obqbYIuV3Bg+51GEDW+HF8n7NRA+iaA4qD0nD9lo9mew==
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
@@ -3910,6 +3934,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
+  integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -4778,6 +4810,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
+  dependencies:
+    iconv-lite "~0.4.13"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@@ -5465,6 +5504,19 @@ fbjs-scripts@^0.8.3:
     semver "^5.1.0"
     through2 "^2.0.0"
 
+fbjs@^0.8.0:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fecha@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fecha/-/fecha-2.3.3.tgz#948e74157df1a32fd1b12c3a3c3cdcb6ec9d96cd"
@@ -6214,6 +6266,11 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
+  integrity sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w==
+
 hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
@@ -6409,7 +6466,7 @@ i18next@^15.1.3:
   dependencies:
     "@babel/runtime" "^7.3.1"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -6885,7 +6942,7 @@ is-root@2.0.0:
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.0.0.tgz#838d1e82318144e5a6f77819d90207645acc7019"
   integrity sha512-F/pJIk8QD6OX5DNhRB7hWamLsUilmkDGho48KbgZ6xg/lmAZXHxzXQ91jzB3yRSw5kdQGGGc4yz8HYhTYIMWPg==
 
-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -6968,6 +7025,14 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -7844,6 +7909,11 @@ lodash._reinterpolate@~3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.debounce@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -8451,6 +8521,14 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -10018,6 +10096,13 @@ promise@8.0.2:
   dependencies:
     asap "~2.0.6"
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 prompts@^2.0.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.1.0.tgz#bf90bc71f6065d255ea2bdc0fe6520485c1b45db"
@@ -10233,6 +10318,15 @@ react-app-polyfill@^1.0.1:
     regenerator-runtime "0.13.2"
     whatwg-fetch "3.0.0"
 
+react-breakpoints@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/react-breakpoints/-/react-breakpoints-3.0.3.tgz#cce7f3d03134c433903e6411d96a4c9a58aaa9f5"
+  integrity sha512-0z4XUzo0S7OG9+m9U9q5bmaLzHVUwWlhzyl7d/l2kn8CExOV5RC2wh4269ubHtuyQS1q0asmtI0Bmekb9tXagg==
+  dependencies:
+    create-react-context "0.2.2"
+    hoist-non-react-statics "2.5.0"
+    lodash.debounce "4.0.8"
+
 react-content-loader@^3.4.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-3.4.2.tgz#187fbec2aa389635e4613faa046713f196173f40"
@@ -11110,7 +11204,7 @@ set-value@^2.0.0:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -12137,6 +12231,11 @@ typescript@3.4.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.5.tgz#2d2618d10bb566572b8d7aad5180d84257d70a99"
   integrity sha512-YycBxUb49UUhdNMU5aJ7z5Ej2XGmaIBL0x34vZ82fn3hGvD+bgrMrVDpatgz2f7YxUMJxMkbWxJZeAvDxVe7Vw==
 
+ua-parser-js@^0.7.18:
+  version "0.7.20"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
+  integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
+
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
@@ -12912,7 +13011,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@3.0.0:
+whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==