From cdca2876572a6849ba2fc2fe7e9369c7bfa87ba2 Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Thu, 31 Jan 2019 15:01:28 -0500
Subject: [PATCH] Added ChartPoint for custom dash legend symbol

---
 .../patternfly-4/react-charts/package.json    |    3 +-
 .../src/components/ChartLegend/ChartLegend.js |    1 +
 .../ChartLegend/ChartLegend.test.js           |    2 +-
 .../__snapshots__/ChartLegend.test.js.snap    |  158 +-
 .../src/components/ChartPoint/ChartPoint.d.ts |   10 +
 .../src/components/ChartPoint/ChartPoint.js   |   58 +
 .../components/ChartPoint/ChartPoint.test.js  |   25 +
 .../__snapshots__/ChartPoint.test.js.snap     | 1486 +++++++++++++++++
 .../src/components/ChartPoint/index.d.ts      |    1 +
 .../src/components/ChartPoint/index.js        |    1 +
 .../src/components/ChartPoint/path-helpers.js |  124 ++
 .../LineChart/examples/SimpleChart.js         |   72 +-
 .../examples/common/getContainerProps.js      |    5 +-
 yarn.lock                                     |   13 +
 14 files changed, 1872 insertions(+), 87 deletions(-)
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.d.ts
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.js
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.test.js
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.js.snap
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartPoint/index.d.ts
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartPoint/index.js
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartPoint/path-helpers.js

diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json
index e9b7f0066a6..9af5fa773b5 100644
--- a/packages/patternfly-4/react-charts/package.json
+++ b/packages/patternfly-4/react-charts/package.json
@@ -42,7 +42,8 @@
   "optionalDependencies": {
     "@types/victory": "^0.9.19",
     "hoist-non-react-statics": "^3.1.0",
-    "victory": "^30.1.0"
+    "victory": "^30.1.0",
+    "victory-core": "^31.1.0"
   },
   "devDependencies": {
     "@patternfly/patternfly": "1.0.184",
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegend.js b/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegend.js
index 8947166a62b..feee301268a 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegend.js
+++ b/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegend.js
@@ -4,6 +4,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 import { VictoryLegend } from 'victory';
 import { default as ChartTheme } from '../ChartTheme/ChartTheme';
 import ChartContainer from '../ChartContainer/ChartContainer';
+import ChartPoint from '../ChartPoint/ChartPoint';
 
 export const propTypes = {
   /**
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegend.test.js b/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegend.test.js
index f1632a32297..4994677c061 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegend.test.js
+++ b/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegend.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ChartLegend from '../ChartDonut/ChartDonut';
+import ChartLegend from './ChartLegend';
 
 Object.values([true, false]).forEach(isRead => {
   test(`Chart`, () => {
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.js.snap b/packages/patternfly-4/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.js.snap
index 35b48304ebd..c93cabe7723 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.js.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.js.snap
@@ -1,49 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Chart 1`] = `
-<VictoryPie
+<VictoryLegend
+  borderComponent={
+    <Border
+      rectComponent={<Rect />}
+    />
+  }
   containerComponent={
-    <VictoryContainer
-      className="VictoryContainer"
-      portalComponent={<Portal />}
-      portalZIndex={99}
-      responsive={true}
+    <ChartContainer
+      responsive={false}
     />
   }
   data={
     Array [
       Object {
-        "x": "A",
-        "y": 1,
-      },
-      Object {
-        "x": "B",
-        "y": 2,
-      },
-      Object {
-        "x": "C",
-        "y": 3,
-      },
-      Object {
-        "x": "D",
-        "y": 1,
+        "name": "Series 1",
       },
       Object {
-        "x": "E",
-        "y": 2,
+        "name": "Series 2",
       },
     ]
   }
-  dataComponent={
-    <Slice
-      pathComponent={<Path />}
+  dataComponent={<ChartPoint />}
+  groupComponent={<g />}
+  labelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
     />
   }
-  groupComponent={<g />}
-  innerRadius={88}
-  labelComponent={<ChartTooltip />}
-  padAngle={1}
-  sortOrder="ascending"
   standalone={true}
   theme={
     Object {
@@ -492,53 +481,51 @@ exports[`Chart 1`] = `
       },
     }
   }
+  titleComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
 />
 `;
 
 exports[`Chart 2`] = `
-<VictoryPie
+<VictoryLegend
+  borderComponent={
+    <Border
+      rectComponent={<Rect />}
+    />
+  }
   containerComponent={
-    <VictoryContainer
-      className="VictoryContainer"
-      portalComponent={<Portal />}
-      portalZIndex={99}
-      responsive={true}
+    <ChartContainer
+      responsive={false}
     />
   }
   data={
     Array [
       Object {
-        "x": "A",
-        "y": 1,
-      },
-      Object {
-        "x": "B",
-        "y": 2,
+        "name": "Series 1",
       },
       Object {
-        "x": "C",
-        "y": 3,
-      },
-      Object {
-        "x": "D",
-        "y": 1,
-      },
-      Object {
-        "x": "E",
-        "y": 2,
+        "name": "Series 2",
       },
     ]
   }
-  dataComponent={
-    <Slice
-      pathComponent={<Path />}
+  dataComponent={<ChartPoint />}
+  groupComponent={<g />}
+  labelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
     />
   }
-  groupComponent={<g />}
-  innerRadius={88}
-  labelComponent={<ChartTooltip />}
-  padAngle={1}
-  sortOrder="ascending"
   standalone={true}
   theme={
     Object {
@@ -987,17 +974,28 @@ exports[`Chart 2`] = `
       },
     }
   }
+  titleComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
 />
 `;
 
 exports[`renders component data 1`] = `
-<VictoryPie
+<VictoryLegend
+  borderComponent={
+    <Border
+      rectComponent={<Rect />}
+    />
+  }
   containerComponent={
-    <VictoryContainer
-      className="VictoryContainer"
-      portalComponent={<Portal />}
-      portalZIndex={99}
-      responsive={true}
+    <ChartContainer
+      responsive={false}
     />
   }
   data={
@@ -1010,17 +1008,18 @@ exports[`renders component data 1`] = `
       },
     ]
   }
-  dataComponent={
-    <Slice
-      pathComponent={<Path />}
-    />
-  }
+  dataComponent={<ChartPoint />}
   groupComponent={<g />}
   height={50}
-  innerRadius={88}
-  labelComponent={<ChartTooltip />}
-  padAngle={1}
-  sortOrder="ascending"
+  labelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
   standalone={true}
   theme={
     Object {
@@ -1470,6 +1469,15 @@ exports[`renders component data 1`] = `
     }
   }
   title="Average number of pets"
+  titleComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
   width={200}
 />
 `;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.d.ts b/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.d.ts
new file mode 100644
index 00000000000..28c2cf15ea8
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.d.ts
@@ -0,0 +1,10 @@
+import * as victory from 'victory';
+// import { OneOf } from '../../typeUtils';
+
+export interface ChartPointProps extends victory.VictoryLegendProps {
+  symbol: string;
+}
+
+declare const Chartpoint: React.ComponentClass<ChartPointProps>;
+
+export default Chartpoint;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.js b/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.js
new file mode 100644
index 00000000000..2ec29f51573
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { Point } from 'victory';
+import { Helpers } from 'victory-core';
+import pathHelpers from './path-helpers';
+
+export const propTypes = {
+  ...Point.propTypes,
+  symbol: PropTypes.oneOfType([
+    PropTypes.oneOf([
+      'circle',
+      'diamond',
+      'plus',
+      'minus',
+      'square',
+      'star',
+      'triangleDown',
+      'triangleUp',
+      'dash',
+    ]),
+    PropTypes.func
+  ])
+};
+
+// Todo: Submit dash symbol to victory-core, providing PF4 doesn't need a smaller lineHeight for dash and minus?
+class VictoryPoint extends Point {
+  getPath(props) {
+    const { datum, active, x, y } = props;
+    const size = Helpers.evaluateProp(props.size, datum, active);
+    if (props.getPath) {
+      return props.getPath(x, y, size);
+    }
+    const pathFunctions = {
+      circle: pathHelpers.circle,
+      square: pathHelpers.square,
+      diamond: pathHelpers.diamond,
+      triangleDown: pathHelpers.triangleDown,
+      triangleUp: pathHelpers.triangleUp,
+      plus: pathHelpers.plus,
+      minus: pathHelpers.minus,
+      star: pathHelpers.star,
+      dash: pathHelpers.dash
+    };
+    const symbol = Helpers.evaluateProp(props.symbol, datum, active);
+    const symbolFunction = typeof pathFunctions[symbol] === 'function' ? pathFunctions[symbol] : pathFunctions.circle;
+    return symbolFunction(x, y, size);
+  }
+}
+
+const ChartPoint = (props) => (
+  <VictoryPoint {...props}/>
+);
+
+hoistNonReactStatics(ChartPoint, Point);
+ChartPoint.propTypes = propTypes;
+
+export default ChartPoint;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.test.js b/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.test.js
new file mode 100644
index 00000000000..8fb63c0be13
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.test.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ChartLegend from '../ChartLegend/ChartLegend';
+import ChartPoint from './ChartPoint';
+
+Object.values([true, false]).forEach(isRead => {
+  test(`Chart`, () => {
+    const view = shallow(<ChartLegend dataComponent={<ChartPoint />}/>);
+    expect(view).toMatchSnapshot();
+  });
+});
+
+test('renders component data', () => {
+  const view = shallow(
+    <ChartLegend
+      data={[
+        { name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash'} }
+      ]}
+      title="Average number of pets"
+      height={50}
+      width={200}
+    />
+  );
+  expect(view).toMatchSnapshot();
+});
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.js.snap b/packages/patternfly-4/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.js.snap
new file mode 100644
index 00000000000..fd6c370a20d
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.js.snap
@@ -0,0 +1,1486 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chart 1`] = `
+<VictoryLegend
+  borderComponent={
+    <Border
+      rectComponent={<Rect />}
+    />
+  }
+  containerComponent={
+    <ChartContainer
+      responsive={false}
+    />
+  }
+  data={
+    Array [
+      Object {
+        "name": "Series 1",
+      },
+      Object {
+        "name": "Series 2",
+      },
+    ]
+  }
+  dataComponent={<ChartPoint />}
+  groupComponent={<g />}
+  labelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+  standalone={true}
+  theme={
+    Object {
+      "area": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "#bee1f4",
+            "fillOpacity": 0.4,
+            "stroke": "#39a5dc",
+            "strokeWidth": 2,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "axis": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "axis": Object {
+            "fill": "transparent",
+            "stroke": "#72767b",
+            "strokeLinecap": "round",
+            "strokeLinejoin": "round",
+            "strokeWidth": 1,
+          },
+          "axisLabel": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 100,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+          "grid": Object {
+            "fill": "none",
+            "pointerEvents": "painted",
+            "stroke": "none",
+          },
+          "tickLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "ticks": Object {
+            "fill": "transparent",
+            "size": 1,
+            "stroke": "transparent",
+          },
+        },
+        "width": 451,
+      },
+      "bar": Object {
+        "barWidth": 10,
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "stroke": "none",
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+        },
+        "width": 451,
+      },
+      "boxplot": Object {
+        "boxWidth": 20,
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "max": Object {
+            "padding": 8,
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "maxLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "median": Object {
+            "padding": 8,
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "medianLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "min": Object {
+            "padding": 8,
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "minLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "q1": Object {
+            "fill": "#bee1f4",
+            "padding": 8,
+          },
+          "q1Labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "q3": Object {
+            "fill": "#bee1f4",
+            "padding": 8,
+          },
+          "q3Labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+        },
+        "width": 451,
+      },
+      "candlestick": Object {
+        "candleColors": Object {
+          "negative": "#39a5dc",
+          "positive": "#bee1f4",
+        },
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "chart": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "parent": Object {
+            "border": "1px solid #bee1f4",
+          },
+        },
+        "width": 451,
+      },
+      "errorbar": Object {
+        "borderWidth": 8,
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "transparent",
+            "stroke": "#39a5dc",
+            "strokeWidth": 2,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "group": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "width": 451,
+      },
+      "legend": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "gutter": 20,
+        "orientation": "horizontal",
+        "style": Object {
+          "data": Object {
+            "type": "square",
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "title": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 2,
+            "stroke": "transparent",
+          },
+        },
+        "titleOrientation": "top",
+      },
+      "line": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "transparent",
+            "stroke": "#39a5dc",
+            "strokeWidth": 2,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "pie": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "padding": 20,
+        "style": Object {
+          "data": Object {
+            "padding": 8,
+            "stroke": "transparent",
+            "strokeWidth": 1,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 8,
+            "stroke": "transparent",
+          },
+        },
+      },
+      "scatter": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "#bee1f4",
+            "stroke": "transparent",
+            "strokeWidth": 0,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "stack": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "stroke": "#fff",
+            "strokeWidth": 1,
+          },
+        },
+        "width": 451,
+      },
+      "tooltip": Object {
+        "cornerRadius": 0,
+        "flyoutStyle": Object {
+          "cornerRadius": 0,
+          "fill": "#fff",
+          "pointerEvents": "none",
+          "stroke": "#282d33",
+          "strokeWidth": 1,
+        },
+        "pointerLength": 10,
+        "style": Object {
+          "fill": "#fff",
+          "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+          "fontSize": 14,
+          "letterSpacing": "normal",
+          "padding": 8,
+          "pointerEvents": "none",
+          "stroke": "#282d33",
+          "textAnchor": "middle",
+        },
+      },
+      "voronoi": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "transparent",
+            "stroke": "transparent",
+            "strokeWidth": 0,
+          },
+          "flyout": Object {
+            "fill": "#fff",
+            "pointerEvents": "none",
+            "strokeWidth": 1,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 8,
+            "pointerEvents": "none",
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+    }
+  }
+  titleComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+/>
+`;
+
+exports[`Chart 2`] = `
+<VictoryLegend
+  borderComponent={
+    <Border
+      rectComponent={<Rect />}
+    />
+  }
+  containerComponent={
+    <ChartContainer
+      responsive={false}
+    />
+  }
+  data={
+    Array [
+      Object {
+        "name": "Series 1",
+      },
+      Object {
+        "name": "Series 2",
+      },
+    ]
+  }
+  dataComponent={<ChartPoint />}
+  groupComponent={<g />}
+  labelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+  standalone={true}
+  theme={
+    Object {
+      "area": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "#bee1f4",
+            "fillOpacity": 0.4,
+            "stroke": "#39a5dc",
+            "strokeWidth": 2,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "axis": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "axis": Object {
+            "fill": "transparent",
+            "stroke": "#72767b",
+            "strokeLinecap": "round",
+            "strokeLinejoin": "round",
+            "strokeWidth": 1,
+          },
+          "axisLabel": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 100,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+          "grid": Object {
+            "fill": "none",
+            "pointerEvents": "painted",
+            "stroke": "none",
+          },
+          "tickLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "ticks": Object {
+            "fill": "transparent",
+            "size": 1,
+            "stroke": "transparent",
+          },
+        },
+        "width": 451,
+      },
+      "bar": Object {
+        "barWidth": 10,
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "stroke": "none",
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+        },
+        "width": 451,
+      },
+      "boxplot": Object {
+        "boxWidth": 20,
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "max": Object {
+            "padding": 8,
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "maxLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "median": Object {
+            "padding": 8,
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "medianLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "min": Object {
+            "padding": 8,
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "minLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "q1": Object {
+            "fill": "#bee1f4",
+            "padding": 8,
+          },
+          "q1Labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "q3": Object {
+            "fill": "#bee1f4",
+            "padding": 8,
+          },
+          "q3Labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+        },
+        "width": 451,
+      },
+      "candlestick": Object {
+        "candleColors": Object {
+          "negative": "#39a5dc",
+          "positive": "#bee1f4",
+        },
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "chart": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "parent": Object {
+            "border": "1px solid #bee1f4",
+          },
+        },
+        "width": 451,
+      },
+      "errorbar": Object {
+        "borderWidth": 8,
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "transparent",
+            "stroke": "#39a5dc",
+            "strokeWidth": 2,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "group": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "width": 451,
+      },
+      "legend": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "gutter": 20,
+        "orientation": "horizontal",
+        "style": Object {
+          "data": Object {
+            "type": "square",
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "title": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 2,
+            "stroke": "transparent",
+          },
+        },
+        "titleOrientation": "top",
+      },
+      "line": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "transparent",
+            "stroke": "#39a5dc",
+            "strokeWidth": 2,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "pie": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "padding": 20,
+        "style": Object {
+          "data": Object {
+            "padding": 8,
+            "stroke": "transparent",
+            "strokeWidth": 1,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 8,
+            "stroke": "transparent",
+          },
+        },
+      },
+      "scatter": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "#bee1f4",
+            "stroke": "transparent",
+            "strokeWidth": 0,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "stack": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "stroke": "#fff",
+            "strokeWidth": 1,
+          },
+        },
+        "width": 451,
+      },
+      "tooltip": Object {
+        "cornerRadius": 0,
+        "flyoutStyle": Object {
+          "cornerRadius": 0,
+          "fill": "#fff",
+          "pointerEvents": "none",
+          "stroke": "#282d33",
+          "strokeWidth": 1,
+        },
+        "pointerLength": 10,
+        "style": Object {
+          "fill": "#fff",
+          "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+          "fontSize": 14,
+          "letterSpacing": "normal",
+          "padding": 8,
+          "pointerEvents": "none",
+          "stroke": "#282d33",
+          "textAnchor": "middle",
+        },
+      },
+      "voronoi": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "transparent",
+            "stroke": "transparent",
+            "strokeWidth": 0,
+          },
+          "flyout": Object {
+            "fill": "#fff",
+            "pointerEvents": "none",
+            "strokeWidth": 1,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 8,
+            "pointerEvents": "none",
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+    }
+  }
+  titleComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+/>
+`;
+
+exports[`renders component data 1`] = `
+<VictoryLegend
+  borderComponent={
+    <Border
+      rectComponent={<Rect />}
+    />
+  }
+  containerComponent={
+    <ChartContainer
+      responsive={false}
+    />
+  }
+  data={
+    Array [
+      Object {
+        "name": "Cats",
+      },
+      Object {
+        "name": "Dogs",
+        "symbol": Object {
+          "type": "dash",
+        },
+      },
+    ]
+  }
+  dataComponent={<ChartPoint />}
+  groupComponent={<g />}
+  height={50}
+  labelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+  standalone={true}
+  theme={
+    Object {
+      "area": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "#bee1f4",
+            "fillOpacity": 0.4,
+            "stroke": "#39a5dc",
+            "strokeWidth": 2,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "axis": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "axis": Object {
+            "fill": "transparent",
+            "stroke": "#72767b",
+            "strokeLinecap": "round",
+            "strokeLinejoin": "round",
+            "strokeWidth": 1,
+          },
+          "axisLabel": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 100,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+          "grid": Object {
+            "fill": "none",
+            "pointerEvents": "painted",
+            "stroke": "none",
+          },
+          "tickLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "ticks": Object {
+            "fill": "transparent",
+            "size": 1,
+            "stroke": "transparent",
+          },
+        },
+        "width": 451,
+      },
+      "bar": Object {
+        "barWidth": 10,
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "stroke": "none",
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+        },
+        "width": 451,
+      },
+      "boxplot": Object {
+        "boxWidth": 20,
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "max": Object {
+            "padding": 8,
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "maxLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "median": Object {
+            "padding": 8,
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "medianLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "min": Object {
+            "padding": 8,
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "minLabels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "q1": Object {
+            "fill": "#bee1f4",
+            "padding": 8,
+          },
+          "q1Labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "q3": Object {
+            "fill": "#bee1f4",
+            "padding": 8,
+          },
+          "q3Labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+        },
+        "width": 451,
+      },
+      "candlestick": Object {
+        "candleColors": Object {
+          "negative": "#39a5dc",
+          "positive": "#bee1f4",
+        },
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "stroke": "#39a5dc",
+            "strokeWidth": 1,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "chart": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "parent": Object {
+            "border": "1px solid #bee1f4",
+          },
+        },
+        "width": 451,
+      },
+      "errorbar": Object {
+        "borderWidth": 8,
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "transparent",
+            "stroke": "#39a5dc",
+            "strokeWidth": 2,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "group": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "width": 451,
+      },
+      "legend": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "gutter": 20,
+        "orientation": "horizontal",
+        "style": Object {
+          "data": Object {
+            "type": "square",
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+          },
+          "title": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 2,
+            "stroke": "transparent",
+          },
+        },
+        "titleOrientation": "top",
+      },
+      "line": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "transparent",
+            "stroke": "#39a5dc",
+            "strokeWidth": 2,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "pie": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "padding": 20,
+        "style": Object {
+          "data": Object {
+            "padding": 8,
+            "stroke": "transparent",
+            "strokeWidth": 1,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 8,
+            "stroke": "transparent",
+          },
+        },
+      },
+      "scatter": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "#bee1f4",
+            "stroke": "transparent",
+            "strokeWidth": 0,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 10,
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+      "stack": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "stroke": "#fff",
+            "strokeWidth": 1,
+          },
+        },
+        "width": 451,
+      },
+      "tooltip": Object {
+        "cornerRadius": 0,
+        "flyoutStyle": Object {
+          "cornerRadius": 0,
+          "fill": "#fff",
+          "pointerEvents": "none",
+          "stroke": "#282d33",
+          "strokeWidth": 1,
+        },
+        "pointerLength": 10,
+        "style": Object {
+          "fill": "#fff",
+          "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+          "fontSize": 14,
+          "letterSpacing": "normal",
+          "padding": 8,
+          "pointerEvents": "none",
+          "stroke": "#282d33",
+          "textAnchor": "middle",
+        },
+      },
+      "voronoi": Object {
+        "colorScale": Array [
+          "#007bba",
+          "#bee1f4",
+          "#39a5dc",
+          "#0066ff",
+        ],
+        "height": 301,
+        "padding": 8,
+        "style": Object {
+          "data": Object {
+            "fill": "transparent",
+            "stroke": "transparent",
+            "strokeWidth": 0,
+          },
+          "flyout": Object {
+            "fill": "#fff",
+            "pointerEvents": "none",
+            "strokeWidth": 1,
+          },
+          "labels": Object {
+            "fill": "#282d33",
+            "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+            "fontSize": 14,
+            "letterSpacing": "normal",
+            "padding": 8,
+            "pointerEvents": "none",
+            "stroke": "transparent",
+            "textAnchor": "middle",
+          },
+        },
+        "width": 451,
+      },
+    }
+  }
+  title="Average number of pets"
+  titleComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+  width={200}
+/>
+`;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/index.d.ts b/packages/patternfly-4/react-charts/src/components/ChartPoint/index.d.ts
new file mode 100644
index 00000000000..fea593fc1b7
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/index.d.ts
@@ -0,0 +1 @@
+export { default as ChartPoint, ChartPointProps } from './ChartPoint';
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/index.js b/packages/patternfly-4/react-charts/src/components/ChartPoint/index.js
new file mode 100644
index 00000000000..92a49917f63
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/index.js
@@ -0,0 +1 @@
+export { default as ChartPoint } from './ChartPoint';
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/path-helpers.js b/packages/patternfly-4/react-charts/src/components/ChartPoint/path-helpers.js
new file mode 100644
index 00000000000..8894c069526
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/path-helpers.js
@@ -0,0 +1,124 @@
+export default {
+  circle(x, y, size) {
+    return `M ${x}, ${y}
+      m ${-size}, 0
+      a ${size}, ${size} 0 1,0 ${size * 2},0
+      a ${size}, ${size} 0 1,0 ${-size * 2},0`;
+  },
+
+  square(x, y, size) {
+    const baseSize = 0.87 * size;
+    const x0 = x - baseSize;
+    const y1 = y + baseSize;
+    const distance = x + baseSize - x0;
+    return `M ${x0}, ${y1}
+      h${distance}
+      v-${distance}
+      h-${distance}
+      z`;
+  },
+
+  diamond(x, y, size) {
+    const baseSize = 0.87 * size;
+    const length = Math.sqrt(2 * (baseSize * baseSize));
+    return `M ${x}, ${y + length}
+      l ${length}, -${length}
+      l -${length}, -${length}
+      l -${length}, ${length}
+      l ${length}, ${length}
+      z`;
+  },
+
+  triangleDown(x, y, size) {
+    const height = (size / 2) * Math.sqrt(3);
+    const x0 = x - size;
+    const x1 = x + size;
+    const y0 = y - size;
+    const y1 = y + height;
+    return `M ${x0}, ${y0}
+      L ${x1}, ${y0}
+      L ${x}, ${y1}
+      z`;
+  },
+
+  triangleUp(x, y, size) {
+    const height = (size / 2) * Math.sqrt(3);
+    const x0 = x - size;
+    const x1 = x + size;
+    const y0 = y - height;
+    const y1 = y + size;
+    return `M ${x0}, ${y1}
+      L ${x1}, ${y1}
+      L ${x}, ${y0}
+      z`;
+  },
+
+  plus(x, y, size) {
+    const baseSize = 1.1 * size;
+    const distance = baseSize / 1.5;
+    return `
+      M ${x - distance / 2}, ${y + baseSize}
+      v-${distance}
+      h-${distance}
+      v-${distance}
+      h${distance}
+      v-${distance}
+      h${distance}
+      v${distance}
+      h${distance}
+      v${distance}
+      h-${distance}
+      v${distance}
+      z`;
+  },
+
+  minus(x, y, size) {
+    const baseSize = 1.1 * size;
+    const lineHeight = baseSize - baseSize * 0.3;
+    const x0 = x - baseSize;
+    const y1 = y + lineHeight / 2;
+    const distance = x + baseSize - x0;
+    return `M ${x0}, ${y1}
+      h${distance}
+      v-${lineHeight}
+      h-${distance}
+      z`;
+  },
+
+  star(x, y, size) {
+    const baseSize = 1.35 * size;
+    const angle = Math.PI / 5;
+    const range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+    const starCoords = range.map(index => {
+      const length = index % 2 === 0 ? baseSize : baseSize / 2;
+      return `${length * Math.sin(angle * (index + 1)) + x},
+        ${length * Math.cos(angle * (index + 1)) + y}`;
+    });
+    return `M ${starCoords.join('L')} z`;
+  },
+
+  // Todo: Submit dash symbol to victory-core, providing PF4 doesn't need a smaller lineHeight for dash and minus?
+  dash(x, y, size) {
+    const baseSize = 1.1 * size;
+    const lineHeight = baseSize - baseSize * 0.3;
+    const x0 = x - baseSize;
+    const y1 = y + lineHeight / 2;
+    const distance = (x + baseSize - x0) * 0.3;
+    const padding = distance / 3;
+    return `M ${x0}, ${y1}
+      h${distance}
+      v-${lineHeight}
+      h-${distance}
+      z
+      M ${x0 + distance + padding}, ${y1}
+      h${distance}
+      v-${lineHeight}
+      h-${distance}
+      z
+      M ${x0 + distance * 2 + padding * 2}, ${y1}
+      h${distance}
+      v-${lineHeight}
+      h-${distance}
+      z`;
+  }
+};
diff --git a/packages/patternfly-4/react-charts/src/components/LineChart/examples/SimpleChart.js b/packages/patternfly-4/react-charts/src/components/LineChart/examples/SimpleChart.js
index 485290dee01..9cbc17581cf 100644
--- a/packages/patternfly-4/react-charts/src/components/LineChart/examples/SimpleChart.js
+++ b/packages/patternfly-4/react-charts/src/components/LineChart/examples/SimpleChart.js
@@ -1,21 +1,61 @@
 import React from 'react';
-import { Chart, ChartGroup, ChartLine, ChartTheme } from '@patternfly/react-charts';
+import { Chart, ChartGroup, ChartLegend, ChartLine, ChartTheme } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
 class SimpleChart extends React.Component {
-  // interpolation="natural"
-
   getChart = theme => (
     <Chart minDomain={{ y: 0 }} theme={theme} height={200} width={300}>
       <ChartGroup>
-        <ChartLine data={[{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 5 }, { x: 4, y: 3 }]} />
-        <ChartLine data={[{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 7 }, { x: 4, y: 4 }]} />
-        <ChartLine data={[{ x: 1, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 9 }, { x: 4, y: 5 }]} />
-        <ChartLine data={[{ x: 1, y: 3 }, { x: 2, y: 3 }, { x: 3, y: 8 }, { x: 4, y: 7 }]} />
+        <ChartLine
+          data={[
+            { name: 'Cats', x: 1, y: 1 },
+            { name: 'Cats', x: 2, y: 2 },
+            { name: 'Cats', x: 3, y: 5 },
+            { name: 'Cats', x: 4, y: 3 }
+          ]}
+        />
+        <ChartLine
+          data={[
+            { name: 'Dogs', x: 1, y: 2 },
+            { name: 'Dogs', x: 2, y: 1 },
+            { name: 'Dogs', x: 3, y: 7 },
+            { name: 'Dogs', x: 4, y: 4 }
+          ]}
+          style={{
+            data: {
+              strokeDasharray: '3,3'
+            }
+          }}
+        />
+        <ChartLine
+          data={[
+            { name: 'Birds', x: 1, y: 3 },
+            { name: 'Birds', x: 2, y: 4 },
+            { name: 'Birds', x: 3, y: 9 },
+            { name: 'Birds', x: 4, y: 5 }
+          ]}
+        />
+        <ChartLine
+          data={[
+            { name: 'Mice', x: 1, y: 3 },
+            { name: 'Mice', x: 2, y: 3 },
+            { name: 'Mice', x: 3, y: 8 },
+            { name: 'Mice', x: 4, y: 7 }
+          ]}
+        />
       </ChartGroup>
     </Chart>
   );
 
+  getlegend = theme => (
+    <ChartLegend
+      data={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash'} }, { name: 'Birds' }, { name: 'Mice' }]}
+      title="Average number of pets"
+      height={50}
+      theme={theme}
+    />
+  );
+
   render() {
     return (
       <Grid gutter="md">
@@ -24,14 +64,28 @@ class SimpleChart extends React.Component {
             Green Theme
           </Text>
           <div className="chart-inline">
-            <div className="chart-container chart-margin chart-overflow">{this.getChart(ChartTheme.light.green)}</div>
+            <div className="chart-container chart-margin chart-overflow">
+              <div>
+                {this.getChart(ChartTheme.light.green)}
+              </div>
+              <div className="chart-legend">
+                {this.getlegend(ChartTheme.light.green)}
+              </div>
+            </div>
           </div>
         </GridItem>
         <GridItem lg={3}>
           <Text className="chart-title" component={TextVariants.h2}>
             Multi Color Theme
           </Text>
-          <div className="chart-container chart-margin chart-overflow">{this.getChart(ChartTheme.light.multi)}</div>
+          <div className="chart-container chart-margin chart-overflow">
+            <div>
+              {this.getChart(ChartTheme.light.multi)}
+            </div>
+            <div className="chart-legend">
+              {this.getlegend(ChartTheme.light.multi)}
+            </div>
+          </div>
         </GridItem>
       </Grid>
     );
diff --git a/packages/patternfly-4/react-charts/src/components/LineChart/examples/common/getContainerProps.js b/packages/patternfly-4/react-charts/src/components/LineChart/examples/common/getContainerProps.js
index e85f283ed6f..4212a300bfc 100644
--- a/packages/patternfly-4/react-charts/src/components/LineChart/examples/common/getContainerProps.js
+++ b/packages/patternfly-4/react-charts/src/components/LineChart/examples/common/getContainerProps.js
@@ -4,7 +4,7 @@ const styles = StyleSheet.create({
   demoLayout: {
     '& > *': {
       '.chart-container': {
-        height: '200px',
+        height: '250px',
         width: '300px'
       },
       '.chart-margin': {
@@ -14,6 +14,9 @@ const styles = StyleSheet.create({
       '.chart-inline': {
         display: 'inline-flex'
       },
+      '.chart-legend': {
+        marginTop: '30px'
+      },
       '.chart-overflow': {
         '& svg': {
           overflow: 'visible'
diff --git a/yarn.lock b/yarn.lock
index 611b4a58a68..32b864a50a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20579,6 +20579,19 @@ victory-core@^30.3.1:
     prop-types "^15.5.8"
     react-fast-compare "^2.0.0"
 
+victory-core@^31.1.0:
+  version "31.2.0"
+  resolved "https://registry.yarnpkg.com/victory-core/-/victory-core-31.2.0.tgz#c526abbeb8003460ac157419c13f9c1935a980f1"
+  dependencies:
+    d3-ease "^1.0.0"
+    d3-interpolate "^1.1.1"
+    d3-scale "^1.0.0"
+    d3-shape "^1.2.0"
+    d3-timer "^1.0.0"
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    react-fast-compare "^2.0.0"
+
 victory-create-container@^30.5.1:
   version "30.5.1"
   resolved "https://registry.yarnpkg.com/victory-create-container/-/victory-create-container-30.5.1.tgz#516c34333945874b489b00c50b0fe11f1f75edfc"