diff --git a/src/components/chartArea/__tests__/__snapshots__/chartArea.test.js.snap b/src/components/chartArea/__tests__/__snapshots__/chartArea.test.js.snap
index affad1166..95f0d582c 100644
--- a/src/components/chartArea/__tests__/__snapshots__/chartArea.test.js.snap
+++ b/src/components/chartArea/__tests__/__snapshots__/chartArea.test.js.snap
@@ -704,33 +704,64 @@ exports[`ChartArea Component should allow tick formatting: y tick format 1`] = `
 </div>
 `;
 
+exports[`ChartArea Component should handle custom chart legends: hide state 1`] = `
+Object {
+  "loremGraph": true,
+}
+`;
+
+exports[`ChartArea Component should handle custom chart legends: isToggled state 1`] = `
+Object {
+  "returnedToggleValue": true,
+  "state": Object {
+    "loremGraph": true,
+  },
+}
+`;
+
 exports[`ChartArea Component should handle custom chart legends: renderLegend: should return a custom legend 1`] = `
 Object {
-  "dataSets": Array [
-    Object {
-      "data": Array [
-        Object {
-          "x": 1,
-          "xAxisLabel": "1 x axis label",
-          "y": 0,
-        },
-      ],
-      "id": "loremGraph",
-      "interpolation": "natural",
-      "isStacked": true,
-    },
-    Object {
-      "data": Array [
-        Object {
-          "x": 1,
-          "xAxisLabel": "1 x axis label",
-          "y": 10,
-        },
-      ],
-      "id": "ipsumGraph",
-      "isThreshold": true,
-    },
-  ],
+  "chart": Object {
+    "hide": [Function],
+    "isToggled": [Function],
+    "revert": [Function],
+    "toggle": [Function],
+  },
+  "datum": Object {
+    "dataSets": Array [
+      Object {
+        "data": Array [
+          Object {
+            "x": 1,
+            "xAxisLabel": "1 x axis label",
+            "y": 0,
+          },
+        ],
+        "id": "loremGraph",
+        "interpolation": "natural",
+        "isStacked": true,
+      },
+      Object {
+        "data": Array [
+          Object {
+            "x": 1,
+            "xAxisLabel": "1 x axis label",
+            "y": 10,
+          },
+        ],
+        "id": "ipsumGraph",
+        "isThreshold": true,
+      },
+    ],
+  },
+}
+`;
+
+exports[`ChartArea Component should handle custom chart legends: revert state 1`] = `Object {}`;
+
+exports[`ChartArea Component should handle custom chart legends: toggle state 1`] = `
+Object {
+  "loremGraph": false,
 }
 `;
 
@@ -867,21 +898,13 @@ exports[`ChartArea Component should handle custom chart tooltips: renderTooltip:
       "y": -10,
     }
   }
-  labelComponent={
-    <VictoryPortal
-      groupComponent={<g />}
-    >
-      <ChartTooltip
-        flyoutComponent={<FlyoutComponent />}
-      />
-    </VictoryPortal>
-  }
+  labelComponent={<FlyoutComponent />}
   labels={[Function]}
   portalComponent={<Portal />}
   portalZIndex={99}
   responsive={true}
   voronoiDimension="x"
-  voronoiPadding={50}
+  voronoiPadding={60}
 />
 `;
 
diff --git a/src/components/chartArea/__tests__/chartArea.test.js b/src/components/chartArea/__tests__/chartArea.test.js
index 8ffb720eb..657647285 100644
--- a/src/components/chartArea/__tests__/chartArea.test.js
+++ b/src/components/chartArea/__tests__/chartArea.test.js
@@ -308,6 +308,7 @@ describe('ChartArea Component', () => {
   });
 
   it('should handle custom chart legends', () => {
+    let chartMethods = {};
     const props = {
       dataSets: [
         {
@@ -334,11 +335,26 @@ describe('ChartArea Component', () => {
           isThreshold: true
         }
       ],
-      chartLegend: propsObj => propsObj.datum
+      chartLegend: propsObj => {
+        chartMethods = propsObj.chart;
+        return propsObj;
+      }
     };
 
     const component = shallow(<ChartArea {...props} />);
     expect(component.instance().renderLegend()).toMatchSnapshot('renderLegend: should return a custom legend');
+
+    chartMethods.hide('loremGraph');
+    expect(component.instance().dataSetsToggle).toMatchSnapshot('hide state');
+
+    const returnedToggleValue = chartMethods.isToggled('loremGraph');
+    expect({ state: component.instance().dataSetsToggle, returnedToggleValue }).toMatchSnapshot('isToggled state');
+
+    chartMethods.toggle('loremGraph');
+    expect(component.instance().dataSetsToggle).toMatchSnapshot('toggle state');
+
+    chartMethods.revert();
+    expect(component.instance().dataSetsToggle).toMatchSnapshot('revert state');
   });
 
   it('should set initial width to zero and then resize', () => {
diff --git a/src/components/chartArea/chartArea.js b/src/components/chartArea/chartArea.js
index a445b66fc..20a8d46b4 100644
--- a/src/components/chartArea/chartArea.js
+++ b/src/components/chartArea/chartArea.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { createContainer, VictoryPortal } from 'victory';
+import { createContainer } from 'victory';
 import {
   Chart,
   ChartAxis,
   ChartStack,
   ChartThreshold,
-  ChartTooltip,
   ChartThemeColor,
   ChartArea as PfChartArea
 } from '@patternfly/react-charts';
@@ -18,10 +17,16 @@ import { helpers } from '../../common';
  *
  * @augments React.Component
  * @fires onResizeContainer
+ * @fires onHide
+ * @fires onRevert
+ * @fires onToggle
+ * @param id
  */
 class ChartArea extends React.Component {
   state = { chartWidth: 0 };
 
+  dataSetsToggle = {};
+
   containerRef = React.createRef();
 
   tooltipRef = React.createRef();
@@ -48,6 +53,52 @@ class ChartArea extends React.Component {
     }
   };
 
+  /**
+   * Consumer exposed, hides chart layer.
+   *
+   * @event onHide
+   * @param {string} id
+   */
+  onHide = id => {
+    this.dataSetsToggle = { ...this.dataSetsToggle, [id]: true };
+    this.forceUpdate();
+  };
+
+  /**
+   * Consumer exposed, turns all chart layers back on.
+   *
+   * @event onRevert
+   */
+  onRevert = () => {
+    this.dataSetsToggle = {};
+    this.forceUpdate();
+  };
+
+  /**
+   * Consumer exposed, turns chart layer on/off.
+   *
+   * @event onToggle
+   * @param {string} id
+   * @returns {boolean}
+   */
+  onToggle = id => {
+    const updatedToggle = !this.dataSetsToggle[id];
+    this.dataSetsToggle = { ...this.dataSetsToggle, [id]: updatedToggle };
+    this.forceUpdate();
+
+    return updatedToggle;
+  };
+
+  /**
+   * Consumer exposed, determine if chart layer on/off.
+   * Note: Using "setState" as related to this exposed check gives the appearance of a race condition.
+   * Using a class property with forceUpdate to bypass.
+   *
+   * @param {string} id
+   * @returns {boolean}
+   */
+  getIsToggled = id => this.dataSetsToggle[id] || false;
+
   /**
    * Apply props, set x and y axis chart increments/ticks formatting.
    *
@@ -131,7 +182,6 @@ class ChartArea extends React.Component {
     };
   }
 
-  // ToDo: the domain range needs to be updated when additional datasets are added
   /**
    * Calculate and return the x and y domain range.
    *
@@ -139,6 +189,7 @@ class ChartArea extends React.Component {
    * @returns {object}
    */
   getChartDomain({ isXAxisTicks }) {
+    const { dataSetsToggle } = this;
     const { domain, dataSets } = this.props;
 
     if (Object.keys(domain).length) {
@@ -153,7 +204,7 @@ class ChartArea extends React.Component {
     const stackedSets = dataSets.filter(set => set.isStacked === true);
 
     stackedSets.forEach(dataSet => {
-      if (dataSet.data) {
+      if (!dataSetsToggle[dataSet.id] && dataSet.data) {
         let dataSetMaxYStacked = 0;
 
         dataSet.data.forEach((value, index) => {
@@ -167,7 +218,7 @@ class ChartArea extends React.Component {
     });
 
     dataSets.forEach(dataSet => {
-      if (dataSet.data) {
+      if (!dataSetsToggle[dataSet.id] && dataSet.data) {
         dataSetMaxX = dataSet.data.length > dataSetMaxX ? dataSet.data.length : dataSetMaxX;
 
         dataSet.data.forEach(value => {
@@ -199,6 +250,7 @@ class ChartArea extends React.Component {
    * @returns {Array}
    */
   getTooltipData() {
+    const { dataSetsToggle } = this;
     const { dataSets, chartTooltip } = this.props;
     let tooltipDataSet = [];
 
@@ -207,7 +259,7 @@ class ChartArea extends React.Component {
         const itemsByKey = {};
 
         dataSets.forEach(data => {
-          if (data.data && data.data[index]) {
+          if (!dataSetsToggle[data.id] && data.data && data.data[index]) {
             itemsByKey[data.id] = {
               color: data.stroke || data.fill || data.color || '',
               data: _cloneDeep(data.data[index])
@@ -239,9 +291,10 @@ class ChartArea extends React.Component {
    * @returns {Node}
    */
   renderTooltip() {
-    const { chartTooltip } = this.props;
+    const { dataSetsToggle } = this;
+    const { chartTooltip, dataSets } = this.props;
 
-    if (!chartTooltip) {
+    if (!chartTooltip || Object.values(dataSetsToggle).filter(v => v === true).length === dataSets.length) {
       return null;
     }
 
@@ -273,7 +326,7 @@ class ChartArea extends React.Component {
 
       if (
         globalContainerBounds.right < globalTooltipBounds.right ||
-        obj.x + globalTooltipBounds.width * 3 > globalContainerBounds.right
+        obj.x + globalTooltipBounds.width > globalContainerBounds.right / 2
       ) {
         xCoordinate = obj.x - 10 - globalTooltipBounds.width;
       }
@@ -283,7 +336,7 @@ class ChartArea extends React.Component {
       if (htmlContent) {
         return (
           <g>
-            <foreignObject x={xCoordinate} y={obj.y / 1.3} width="100%" height="100%">
+            <foreignObject x={xCoordinate} y={obj.y / 2} width="100%" height="100%">
               <div ref={this.tooltipRef} style={{ display: 'inline-block' }} xmlns="http://www.w3.org/1999/xhtml">
                 {htmlContent}
               </div>
@@ -295,20 +348,13 @@ class ChartArea extends React.Component {
       return <g />;
     };
 
-    // FixMe: "flyoutComponent" on ChartTooltip attribute requires very specific format.
-    const labelComponent = (
-      <VictoryPortal>
-        <ChartTooltip flyoutComponent={<FlyoutComponent />} />
-      </VictoryPortal>
-    );
-
     return (
       <VictoryVoronoiCursorContainer
         cursorDimension="x"
         labels={() => ''}
-        labelComponent={labelComponent}
+        labelComponent={<FlyoutComponent />}
         voronoiDimension="x"
-        voronoiPadding={50}
+        voronoiPadding={60}
       />
     );
   }
@@ -325,13 +371,19 @@ class ChartArea extends React.Component {
       return null;
     }
 
-    const mockDatum = {
-      datum: { dataSets: _cloneDeep(dataSets) }
+    const legendProps = {
+      datum: { dataSets: _cloneDeep(dataSets) },
+      chart: {
+        hide: this.onHide,
+        revert: this.onRevert,
+        toggle: this.onToggle,
+        isToggled: this.getIsToggled
+      }
     };
 
     return (
-      (React.isValidElement(chartLegend) && React.cloneElement(chartLegend, { ...mockDatum })) ||
-      chartLegend({ ...mockDatum })
+      (React.isValidElement(chartLegend) && React.cloneElement(chartLegend, { ...legendProps })) ||
+      chartLegend({ ...legendProps })
     );
   }
 
@@ -342,6 +394,7 @@ class ChartArea extends React.Component {
    * @returns {Array}
    */
   renderChart({ stacked = false }) {
+    const { dataSetsToggle } = this;
     const { dataSets } = this.props;
     const charts = [];
     const chartsStacked = [];
@@ -407,7 +460,7 @@ class ChartArea extends React.Component {
     };
 
     dataSets.forEach((dataSet, index) => {
-      if (dataSet.data && dataSet.data.length) {
+      if (!dataSetsToggle[dataSet.id] && dataSet.data && dataSet.data.length) {
         const updatedDataSet = (dataSet.isThreshold && thresholdChart(dataSet, index)) || areaChart(dataSet, index);
 
         if (dataSet.isStacked) {
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
index a7b8dc3c0..8510fa639 100644
--- a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
+++ b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
@@ -1,5 +1,82 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GraphCardChartLegend Component should handle a click event: click event post 1`] = `
+<Component
+  className="victory-legend-item"
+  component="a"
+  icon={
+    <div
+      aria-hidden={true}
+      className="legend-icon"
+      style={
+        Object {
+          "backgroundColor": "#000000",
+          "visibility": "visible",
+        }
+      }
+    />
+  }
+  isDisabled={false}
+  key="curiosity-button-loremIpsum"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  tabIndex={0}
+  variant="link"
+>
+  t(curiosity-graph.loremIpsumLabel, [object Object])
+</Component>
+`;
+
+exports[`GraphCardChartLegend Component should handle a click event: click event pre 1`] = `
+<Component
+  className="victory-legend-item"
+  component="a"
+  icon={
+    <div
+      aria-hidden={true}
+      className="legend-icon"
+      style={
+        Object {
+          "backgroundColor": "#000000",
+          "visibility": "visible",
+        }
+      }
+    />
+  }
+  isDisabled={false}
+  key="curiosity-button-loremIpsum"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  tabIndex={0}
+  variant="link"
+>
+  t(curiosity-graph.loremIpsumLabel, [object Object])
+</Component>
+`;
+
+exports[`GraphCardChartLegend Component should handle a click event: click event update 1`] = `
+<Component
+  className="victory-legend-item"
+  component="a"
+  icon={
+    <EyeSlashIcon
+      color="currentColor"
+      noVerticalAlign={false}
+      size="sm"
+      title={null}
+    />
+  }
+  isDisabled={false}
+  key="curiosity-button-loremIpsum"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  tabIndex={0}
+  variant="link"
+>
+  t(curiosity-graph.loremIpsumLabel, [object Object])
+</Component>
+`;
+
 exports[`GraphCardChartLegend Component should handle variations in data when returning legend items: legend item, MISSING tooltip content 1`] = `
 <Unknown
   className="victory-legend-item"
@@ -10,13 +87,15 @@ exports[`GraphCardChartLegend Component should handle variations in data when re
       className="legend-icon"
       style={
         Object {
-          "backgroundColor": "#ipsum",
+          "backgroundColor": "#000000",
           "visibility": "visible",
         }
       }
     />
   }
   isDisabled={false}
+  onClick={[Function]}
+  onKeyPress={[Function]}
   tabIndex={0}
   variant="link"
 >
@@ -69,13 +148,15 @@ exports[`GraphCardChartLegend Component should handle variations in data when re
         className="legend-icon"
         style={
           Object {
-            "backgroundColor": "#ipsum",
+            "backgroundColor": "#000000",
             "visibility": "visible",
           }
         }
       />
     }
     isDisabled={false}
+    onClick={[Function]}
+    onKeyPress={[Function]}
     tabIndex={0}
     variant="link"
   >
@@ -97,6 +178,8 @@ exports[`GraphCardChartLegend Component should handle variations in data when re
     />
   }
   isDisabled={true}
+  onClick={[Function]}
+  onKeyPress={[Function]}
   tabIndex={0}
   variant="link"
 >
@@ -159,6 +242,8 @@ exports[`GraphCardChartLegend Component should render a basic component: basic 1
       }
       isDisabled={false}
       key="curiosity-button-loremIpsum"
+      onClick={[Function]}
+      onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
@@ -223,6 +308,8 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       }
       isDisabled={false}
       key="curiosity-button-loremIpsum"
+      onClick={[Function]}
+      onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
@@ -278,6 +365,8 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       }
       isDisabled={true}
       key="curiosity-button-ametConsectetur"
+      onClick={[Function]}
+      onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
@@ -337,6 +426,8 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       }
       isDisabled={false}
       key="curiosity-button-dolorSit"
+      onClick={[Function]}
+      onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
@@ -396,6 +487,8 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       }
       isDisabled={false}
       key="curiosity-button-nonCursus"
+      onClick={[Function]}
+      onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
diff --git a/src/components/graphCard/__tests__/graphCardChartLegend.test.js b/src/components/graphCard/__tests__/graphCardChartLegend.test.js
index 0d55c1fcf..fca15cd1f 100644
--- a/src/components/graphCard/__tests__/graphCardChartLegend.test.js
+++ b/src/components/graphCard/__tests__/graphCardChartLegend.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { Button } from '@patternfly/react-core';
 import { GraphCardChartLegend } from '../graphCardChartLegend';
 
 describe('GraphCardChartLegend Component', () => {
@@ -57,11 +58,76 @@ describe('GraphCardChartLegend Component', () => {
     expect(component).toMatchSnapshot('data');
   });
 
+  it('should handle a click event', () => {
+    const props = {
+      datum: {
+        dataSets: [
+          {
+            stroke: '#000000',
+            id: 'loremIpsum',
+            isThreshold: false,
+            data: [{ y: 0, hasData: true }]
+          },
+          {
+            stroke: '#ff0000',
+            id: 'dolorSit',
+            isThreshold: true,
+            data: [{ y: 0, isInfinite: false }]
+          }
+        ]
+      },
+      legend: {
+        'test-dolorSit': true
+      },
+      product: 'test',
+      viewId: 'test'
+    };
+
+    const component = shallow(<GraphCardChartLegend {...props} />);
+    expect(component.find(Button).first()).toMatchSnapshot('click event pre');
+
+    component.find(Button).first().simulate('click');
+    // emulate a Redux state update.
+    component.setProps({
+      legend: { ...props.legend, ...{ 'test-loremIpsum': true } }
+    });
+    expect(component.find(Button).first()).toMatchSnapshot('click event update');
+
+    component.find(Button).first().simulate('keyPress');
+    // emulate a Redux state update.
+    component.setProps({
+      legend: { ...props.legend, ...{ 'test-loremIpsum': false } }
+    });
+    expect(component.find(Button).first()).toMatchSnapshot('click event post');
+  });
+
   it('should handle variations in data when returning legend items', () => {
+    const props = {
+      datum: {
+        dataSets: [
+          {
+            stroke: '#000000',
+            id: 'loremIpsum',
+            isThreshold: false,
+            data: [{ y: 0, hasData: true }]
+          },
+          {
+            stroke: '#ff0000',
+            id: 'dolorSit',
+            isThreshold: true,
+            data: [{ y: 0, isInfinite: false }]
+          }
+        ]
+      },
+      product: 'test'
+    };
+
+    const component = shallow(<GraphCardChartLegend {...props} />);
+
     expect(
-      GraphCardChartLegend.renderLegendItem({
-        chartId: 'lorem',
-        color: '#ipsum',
+      component.instance().renderLegendItem({
+        chartId: 'loremIpsum',
+        color: '#000000',
         isDisabled: false,
         isThreshold: false,
         labelContent: 'lorem ispum',
@@ -70,9 +136,9 @@ describe('GraphCardChartLegend Component', () => {
     ).toMatchSnapshot('legend item, WITH tooltip content');
 
     expect(
-      GraphCardChartLegend.renderLegendItem({
-        chartId: 'lorem',
-        color: '#ipsum',
+      component.instance().renderLegendItem({
+        chartId: 'loremIpsum',
+        color: '#000000',
         isDisabled: false,
         isThreshold: false,
         labelContent: 'lorem ispum',
@@ -81,9 +147,9 @@ describe('GraphCardChartLegend Component', () => {
     ).toMatchSnapshot('legend item, MISSING tooltip content');
 
     expect(
-      GraphCardChartLegend.renderLegendItem({
-        chartId: 'lorem',
-        color: '#ipsum',
+      component.instance().renderLegendItem({
+        chartId: 'loremIpsum',
+        color: '#000000',
         isDisabled: true,
         isThreshold: false,
         labelContent: 'lorem ispum',
diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
index 9f25bba93..b0dd7c97c 100644
--- a/src/components/graphCard/graphCard.js
+++ b/src/components/graphCard/graphCard.js
@@ -83,7 +83,7 @@ class GraphCard extends React.Component {
    * @returns {Node}
    */
   renderChart() {
-    const { filterGraphData, graphData, graphQuery, selectOptionsType, productShortLabel } = this.props;
+    const { filterGraphData, graphData, graphQuery, selectOptionsType, productShortLabel, viewId } = this.props;
     const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
     const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
     const updatedGranularity = graphGranularity || selected;
@@ -141,7 +141,9 @@ class GraphCard extends React.Component {
         key={helpers.generateId()}
         {...chartAreaProps}
         dataSets={filteredGraphData(graphData)}
-        chartLegend={({ datum }) => <GraphCardChartLegend datum={datum} product={productShortLabel} />}
+        chartLegend={({ chart, datum }) => (
+          <GraphCardChartLegend chart={chart} datum={datum} product={productShortLabel} viewId={viewId} />
+        )}
         chartTooltip={({ datum }) => (
           <GraphCardChartTooltip datum={datum} granularity={updatedGranularity} product={productShortLabel} />
         )}
diff --git a/src/components/graphCard/graphCardChartLegend.js b/src/components/graphCard/graphCardChartLegend.js
index 9a1ab89da..1d8fbb5ba 100644
--- a/src/components/graphCard/graphCardChartLegend.js
+++ b/src/components/graphCard/graphCardChartLegend.js
@@ -1,19 +1,66 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { EyeSlashIcon } from '@patternfly/react-icons';
+import { connectTranslate, store, reduxTypes } from '../../redux';
 import { helpers } from '../../common';
 
 /**
  * A custom chart legend.
  *
  * @augments React.Component
+ * @fires onClick
  */
 class GraphCardChartLegend extends React.Component {
-  static renderLegendItem({ chartId, color, isDisabled, isThreshold, labelContent, tooltipContent }) {
+  componentDidMount() {
+    const { chart, datum, legend, viewId } = this.props;
+    datum.dataSets.forEach(({ id }) => {
+      const checkIsToggled = legend[`${viewId}-${id}`] || chart.isToggled(id);
+
+      if (checkIsToggled) {
+        chart.hide(id);
+      }
+    });
+  }
+
+  /**
+   * Toggle legend item and chart.
+   *
+   * @event onClick
+   * @param {string} id
+   */
+  onClick = id => {
+    const { chart, viewId } = this.props;
+    const updatedToggle = chart.toggle(id);
+
+    store.dispatch({
+      type: reduxTypes.graph.SET_GRAPH_LEGEND,
+      legend: {
+        [`${viewId}-${id}`]: updatedToggle
+      }
+    });
+  };
+
+  /**
+   * Return a legend item.
+   *
+   * @param {object} options
+   * @property {string} chartId
+   * @property {string} color
+   * @property {boolean} isDisabled
+   * @property {boolean} isThreshold
+   * @property {string} labelContent
+   * @property {string} tooltipContent
+   * @returns {Node}
+   */
+  renderLegendItem({ chartId, color, isDisabled, isThreshold, labelContent, tooltipContent }) {
+    const { chart, legend, viewId } = this.props;
+    const checkIsToggled = legend[`${viewId}-${chartId}`] || chart.isToggled(chartId);
+
     const button = (
       <Button
+        onClick={() => this.onClick(chartId)}
+        onKeyPress={() => this.onClick(chartId)}
         className="victory-legend-item"
         tabIndex={0}
         key={`curiosity-button-${chartId}`}
@@ -21,13 +68,13 @@ class GraphCardChartLegend extends React.Component {
         component="a"
         isDisabled={isDisabled}
         icon={
-          (isDisabled && <EyeSlashIcon />) ||
+          ((isDisabled || checkIsToggled) && <EyeSlashIcon />) ||
           (isThreshold && (
             <hr
               aria-hidden
               className="threshold-legend-icon"
               style={{
-                visibility: (isDisabled && 'hidden') || 'visible',
+                visibility: (isDisabled && 'hidden') || (checkIsToggled && 'hidden') || 'visible',
                 borderTopColor: color
               }}
             />
@@ -36,7 +83,7 @@ class GraphCardChartLegend extends React.Component {
               aria-hidden
               className="legend-icon"
               style={{
-                visibility: (isDisabled && 'hidden') || 'visible',
+                visibility: (isDisabled && 'hidden') || (checkIsToggled && 'hidden') || 'visible',
                 backgroundColor: color
               }}
             />
@@ -65,6 +112,11 @@ class GraphCardChartLegend extends React.Component {
     return button;
   }
 
+  /**
+   * Render a graph legend.
+   *
+   * @returns {Node}
+   */
   render() {
     const { datum, product, t } = this.props;
 
@@ -82,7 +134,7 @@ class GraphCardChartLegend extends React.Component {
           const tooltipContent =
             (isThreshold && t(`curiosity-graph.thresholdLegendTooltip`)) || t(`curiosity-graph.${id}LegendTooltip`);
 
-          return GraphCardChartLegend.renderLegendItem({
+          return this.renderLegendItem({
             chartId: id,
             color: stroke,
             labelContent,
@@ -99,9 +151,14 @@ class GraphCardChartLegend extends React.Component {
 /**
  * Prop types.
  *
- * @type {{datum, product: string, t: Function}}
+ * @type {{datum, product: string, t: Function, legend, chart}}
  */
 GraphCardChartLegend.propTypes = {
+  chart: PropTypes.shape({
+    hide: PropTypes.func,
+    toggle: PropTypes.func,
+    isToggled: PropTypes.func
+  }),
   datum: PropTypes.shape({
     dataSets: PropTypes.arrayOf(
       PropTypes.shape({
@@ -111,23 +168,35 @@ GraphCardChartLegend.propTypes = {
       })
     )
   }),
+  legend: PropTypes.objectOf(PropTypes.bool),
   product: PropTypes.string,
-  t: PropTypes.func
+  t: PropTypes.func,
+  viewId: PropTypes.string
 };
 
 /**
  * Default props.
  *
- * @type {{datum: {}, product: string, t: Function}}
+ * @type {{datum: { dataSets: [] }, product: string, t: Function, legend: {}, chart: {hide: Function,
+ *     toggle: Function, isToggled: Function}}}
  */
 GraphCardChartLegend.defaultProps = {
+  chart: {
+    hide: helpers.noop,
+    toggle: helpers.noop,
+    isToggled: helpers.noop
+  },
   datum: {
     dataSets: []
   },
+  legend: {},
   product: '',
-  t: helpers.noopTranslate
+  t: helpers.noopTranslate,
+  viewId: 'graphCardLegend'
 };
 
-const TranslatedGraphCardChartLegend = withTranslation()(GraphCardChartLegend);
+const mapStateToProps = ({ graph }) => ({ legend: graph.legend });
+
+const ConnectedGraphCardChartLegend = connectTranslate(mapStateToProps)(GraphCardChartLegend);
 
-export { TranslatedGraphCardChartLegend as default, TranslatedGraphCardChartLegend, GraphCardChartLegend };
+export { ConnectedGraphCardChartLegend as default, ConnectedGraphCardChartLegend, GraphCardChartLegend };
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
index 15db61e5f..e424bdf78 100644
--- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
+++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -35,8 +35,8 @@ msgstr \\"\\"
 
 #: src/components/c3GraphCard/c3GraphCard.js:189
 #: src/components/c3GraphCard/c3GraphCard.js:193
-#: src/components/graphCard/graphCard.js:174
-#: src/components/graphCard/graphCard.js:178
+#: src/components/graphCard/graphCard.js:176
+#: src/components/graphCard/graphCard.js:180
 msgid \\"curiosity-graph.dropdownPlaceholder\\"
 msgstr \\"\\"
 
@@ -64,7 +64,7 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.noDataLabel\\"
 msgstr \\"\\"
 
-#: src/components/graphCard/graphCardChartLegend.js:80
+#: src/components/graphCard/graphCardChartLegend.js:132
 msgid \\"curiosity-graph.noLabel\\"
 msgstr \\"\\"
 
@@ -75,13 +75,13 @@ msgstr \\"\\"
 
 #: src/components/c3GraphCard/c3GraphCard.js:110
 #: src/components/c3GraphCard/c3GraphCardHelpers.js:133
-#: src/components/graphCard/graphCardChartLegend.js:78
+#: src/components/graphCard/graphCardChartLegend.js:130
 #: src/components/graphCard/graphCardChartTooltip.js:34
 msgid \\"curiosity-graph.thresholdLabel\\"
 msgstr \\"\\"
 
 #: src/components/c3GraphCard/c3GraphCard.js:93
-#: src/components/graphCard/graphCardChartLegend.js:83
+#: src/components/graphCard/graphCardChartLegend.js:135
 msgid \\"curiosity-graph.thresholdLegendTooltip\\"
 msgstr \\"\\"
 
diff --git a/src/redux/reducers/__tests__/__snapshots__/graphReducer.test.js.snap b/src/redux/reducers/__tests__/__snapshots__/graphReducer.test.js.snap
index b8c319174..476e1aa7f 100644
--- a/src/redux/reducers/__tests__/__snapshots__/graphReducer.test.js.snap
+++ b/src/redux/reducers/__tests__/__snapshots__/graphReducer.test.js.snap
@@ -3,6 +3,7 @@
 exports[`GraphReducer should handle all defined error types: rejected types GET_GRAPH_REPORT_CAPACITY_RHSM 1`] = `
 Object {
   "result": Object {
+    "legend": Object {},
     "reportCapacity": Object {
       "error": true,
       "errorMessage": "MESSAGE",
@@ -22,6 +23,7 @@ Object {
 exports[`GraphReducer should handle all defined fulfilled types: fulfilled types GET_GRAPH_REPORT_CAPACITY_RHSM 1`] = `
 Object {
   "result": Object {
+    "legend": Object {},
     "reportCapacity": Object {
       "data": Object {
         "test": "success",
@@ -45,6 +47,7 @@ Object {
 exports[`GraphReducer should handle all defined pending types: pending types GET_GRAPH_REPORT_CAPACITY_RHSM 1`] = `
 Object {
   "result": Object {
+    "legend": Object {},
     "reportCapacity": Object {
       "error": false,
       "errorMessage": "",
@@ -59,3 +62,15 @@ Object {
   "type": "GET_GRAPH_REPORT_CAPACITY_RHSM_PENDING",
 }
 `;
+
+exports[`GraphReducer should handle specific defined types: defined type SET_GRAPH_LEGEND 1`] = `
+Object {
+  "result": Object {
+    "legend": Object {
+      "lorem": true,
+    },
+    "reportCapacity": Object {},
+  },
+  "type": "SET_GRAPH_LEGEND",
+}
+`;
diff --git a/src/redux/reducers/__tests__/graphReducer.test.js b/src/redux/reducers/__tests__/graphReducer.test.js
index 719cecc3e..9b504e6f7 100644
--- a/src/redux/reducers/__tests__/graphReducer.test.js
+++ b/src/redux/reducers/__tests__/graphReducer.test.js
@@ -1,5 +1,5 @@
 import graphReducer from '../graphReducer';
-import { rhsmTypes as types } from '../../types';
+import { rhsmTypes as types, graphTypes } from '../../types';
 import { reduxHelpers } from '../../common/reduxHelpers';
 
 describe('GraphReducer', () => {
@@ -7,6 +7,21 @@ describe('GraphReducer', () => {
     expect(graphReducer.initialState).toBeDefined();
   });
 
+  it('should handle specific defined types', () => {
+    const specificTypes = [graphTypes.SET_GRAPH_LEGEND];
+
+    specificTypes.forEach(value => {
+      const dispatched = {
+        type: value,
+        legend: { lorem: true }
+      };
+
+      const resultState = graphReducer(undefined, dispatched);
+
+      expect({ type: value, result: resultState }).toMatchSnapshot(`defined type ${value}`);
+    });
+  });
+
   it('should handle all defined error types', () => {
     const specificTypes = [types.GET_GRAPH_REPORT_CAPACITY_RHSM];
 
diff --git a/src/redux/reducers/graphReducer.js b/src/redux/reducers/graphReducer.js
index 464935e92..3706a1165 100644
--- a/src/redux/reducers/graphReducer.js
+++ b/src/redux/reducers/graphReducer.js
@@ -1,4 +1,4 @@
-import { rhsmTypes } from '../types';
+import { rhsmTypes, graphTypes } from '../types';
 import { reduxHelpers } from '../common/reduxHelpers';
 
 /**
@@ -8,22 +8,39 @@ import { reduxHelpers } from '../common/reduxHelpers';
  * @type {{reportCapacity: object}}
  */
 const initialState = {
+  legend: {},
   reportCapacity: {}
 };
 
 /**
- * Apply generated graph observer/reducer for reportCapacity to state, against actions.
+ * Apply graph interaction, and generated graph observer/reducer for reportCapacity to state,
+ * against actions.
  *
  * @param {object} state
  * @param {object} action
  * @returns {object|{}}
  */
-const graphReducer = (state = initialState, action) =>
-  reduxHelpers.generatedPromiseActionReducer(
-    [{ ref: 'reportCapacity', type: rhsmTypes.GET_GRAPH_REPORT_CAPACITY_RHSM }],
-    state,
-    action
-  );
+const graphReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case graphTypes.SET_GRAPH_LEGEND:
+      return reduxHelpers.setStateProp(
+        'legend',
+        {
+          ...action.legend
+        },
+        {
+          state,
+          reset: false
+        }
+      );
+    default:
+      return reduxHelpers.generatedPromiseActionReducer(
+        [{ ref: 'reportCapacity', type: rhsmTypes.GET_GRAPH_REPORT_CAPACITY_RHSM }],
+        state,
+        action
+      );
+  }
+};
 
 graphReducer.initialState = initialState;
 
diff --git a/src/redux/types/__tests__/__snapshots__/index.test.js.snap b/src/redux/types/__tests__/__snapshots__/index.test.js.snap
index 29534f8a6..896053325 100644
--- a/src/redux/types/__tests__/__snapshots__/index.test.js.snap
+++ b/src/redux/types/__tests__/__snapshots__/index.test.js.snap
@@ -11,6 +11,9 @@ Object {
       "STATUS_4XX": "4XX",
       "STATUS_5XX": "5XX",
     },
+    "graph": Object {
+      "SET_GRAPH_LEGEND": "SET_GRAPH_LEGEND",
+    },
     "platform": Object {
       "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
       "PLATFORM_APP_NAME": "PLATFORM_APP_NAME",
@@ -36,6 +39,9 @@ Object {
       "USER_LOGOUT": "USER_LOGOUT",
     },
   },
+  "graphTypes": Object {
+    "SET_GRAPH_LEGEND": "SET_GRAPH_LEGEND",
+  },
   "platformTypes": Object {
     "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
     "PLATFORM_APP_NAME": "PLATFORM_APP_NAME",
@@ -50,6 +56,9 @@ Object {
       "STATUS_4XX": "4XX",
       "STATUS_5XX": "5XX",
     },
+    "graph": Object {
+      "SET_GRAPH_LEGEND": "SET_GRAPH_LEGEND",
+    },
     "platform": Object {
       "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
       "PLATFORM_APP_NAME": "PLATFORM_APP_NAME",
@@ -99,6 +108,9 @@ Object {
     "STATUS_4XX": "4XX",
     "STATUS_5XX": "5XX",
   },
+  "graph": Object {
+    "SET_GRAPH_LEGEND": "SET_GRAPH_LEGEND",
+  },
   "platform": Object {
     "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
     "PLATFORM_APP_NAME": "PLATFORM_APP_NAME",
diff --git a/src/redux/types/graphTypes.js b/src/redux/types/graphTypes.js
new file mode 100644
index 000000000..58927d270
--- /dev/null
+++ b/src/redux/types/graphTypes.js
@@ -0,0 +1,12 @@
+const SET_GRAPH_LEGEND = 'SET_GRAPH_LEGEND';
+
+/**
+ * Graph action, reducer types.
+ *
+ * @type {{SET_GRAPH_LEGEND: string}}
+ */
+const graphTypes = {
+  SET_GRAPH_LEGEND
+};
+
+export { graphTypes as default, graphTypes, SET_GRAPH_LEGEND };
diff --git a/src/redux/types/index.js b/src/redux/types/index.js
index 200dafba4..c9047eff6 100644
--- a/src/redux/types/index.js
+++ b/src/redux/types/index.js
@@ -1,13 +1,15 @@
 import { appTypes } from './appTypes';
+import { graphTypes } from './graphTypes';
 import { platformTypes } from './platformTypes';
 import { rhsmTypes } from './rhsmTypes';
 import { userTypes } from './userTypes';
 
 const reduxTypes = {
   app: appTypes,
+  graph: graphTypes,
   platform: platformTypes,
   rhsm: rhsmTypes,
   user: userTypes
 };
 
-export { reduxTypes as default, reduxTypes, appTypes, platformTypes, rhsmTypes, userTypes };
+export { reduxTypes as default, reduxTypes, appTypes, graphTypes, platformTypes, rhsmTypes, userTypes };
diff --git a/src/styles/_usage-graph.scss b/src/styles/_usage-graph.scss
index aa3873ef8..2ce29f359 100644
--- a/src/styles/_usage-graph.scss
+++ b/src/styles/_usage-graph.scss
@@ -11,10 +11,6 @@
     margin-top: -35px;
   }
 
-  .victory-legend-item:not(.pf-m-disabled) {
-    color: inherit;
-  }
-
   .victory-legend-icon {
     margin-right: 5px;
   }