From cd6788b0aff2d326535a1e3bb518e6f00946ba29 Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Mon, 25 Feb 2019 08:45:13 -0500
Subject: [PATCH] feat(charts): Add ChartAxis (#1309)

ChartAxis is a wrapper for VictoryAxis, which allows users to customize chart tic labels along the x/y axis.
---
 .../src/components/ChartAxis/ChartAxis.d.ts   |    7 +
 .../src/components/ChartAxis/ChartAxis.js     |   20 +
 .../components/ChartAxis/ChartAxis.test.js    |   34 +
 .../__snapshots__/ChartAxis.test.js.snap      | 3757 +++++++++++++++++
 .../src/components/ChartAxis/index.d.ts       |    1 +
 .../src/components/ChartAxis/index.js         |    1 +
 .../LineChart/examples/SimpleChart.js         |    2 +
 .../react-charts/src/components/index.d.ts    |    1 +
 .../react-charts/src/components/index.js      |    1 +
 9 files changed, 3824 insertions(+)
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.d.ts
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.js
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.test.js
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.js.snap
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartAxis/index.d.ts
 create mode 100644 packages/patternfly-4/react-charts/src/components/ChartAxis/index.js

diff --git a/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.d.ts b/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.d.ts
new file mode 100644
index 00000000000..b5a623699c3
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.d.ts
@@ -0,0 +1,7 @@
+import * as victory from 'victory';
+
+export interface ChartAxisProps extends victory.VictoryAxisProps {}
+
+declare const ChartAxis: React.ComponentClass<ChartAxisProps>;
+
+export default ChartAxis;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.js b/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.js
new file mode 100644
index 00000000000..4e25fb2bc20
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { VictoryAxis } from 'victory';
+import { default as ChartTheme } from '../ChartTheme/ChartTheme';
+
+export const propTypes = {
+  /**
+   * See TypeScript API docs: https://formidable.com/open-source/victory/docs/victory-chart/
+   */
+  '': PropTypes.any
+};
+
+const ChartAxis = (props) => (
+  <VictoryAxis theme={ChartTheme.default} {...props}/>
+);
+hoistNonReactStatics(ChartAxis, VictoryAxis);
+ChartAxis.propTypes = propTypes;
+
+export default ChartAxis;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.test.js b/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.test.js
new file mode 100644
index 00000000000..367fa8b3c15
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.test.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Chart from '../Chart/Chart';
+import ChartAxis from './ChartAxis';
+import ChartGroup from '../ChartGroup/ChartGroup';
+import ChartLine from '../ChartLine/ChartLine';
+
+Object.values([true, false]).forEach(isRead => {
+  test(`ChartAxis`, () => {
+    const view = shallow(<ChartAxis/>);
+    expect(view).toMatchSnapshot();
+  });
+});
+
+test('renders component data', () => {
+  const view = shallow(
+    <Chart
+      domainPadding={{ x: [30, 25] }}
+      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 }]} />
+    </ChartGroup>
+    <ChartAxis tickValues={[2, 3, 4]} />
+    <ChartAxis dependentAxis tickValues={[2, 5, 8]} />
+  </Chart>
+);
+  expect(view).toMatchSnapshot();
+});
+
diff --git a/packages/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.js.snap b/packages/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.js.snap
new file mode 100644
index 00000000000..6379c60062d
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.js.snap
@@ -0,0 +1,3757 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChartAxis 1`] = `
+<VictoryAxis
+  axisComponent={
+    <LineSegment
+      lineComponent={<Line />}
+      type="axis"
+    />
+  }
+  axisLabelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+  containerComponent={
+    <VictoryContainer
+      className="VictoryContainer"
+      portalComponent={<Portal />}
+      portalZIndex={99}
+      responsive={true}
+    />
+  }
+  fixLabelOverlap={false}
+  gridComponent={
+    <LineSegment
+      lineComponent={<Line />}
+      type="grid"
+    />
+  }
+  groupComponent={
+    <g
+      role="presentation"
+    />
+  }
+  scale="linear"
+  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,
+      },
+    }
+  }
+  tickComponent={
+    <LineSegment
+      lineComponent={<Line />}
+      type="tick"
+    />
+  }
+  tickLabelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+/>
+`;
+
+exports[`ChartAxis 2`] = `
+<VictoryAxis
+  axisComponent={
+    <LineSegment
+      lineComponent={<Line />}
+      type="axis"
+    />
+  }
+  axisLabelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+  containerComponent={
+    <VictoryContainer
+      className="VictoryContainer"
+      portalComponent={<Portal />}
+      portalZIndex={99}
+      responsive={true}
+    />
+  }
+  fixLabelOverlap={false}
+  gridComponent={
+    <LineSegment
+      lineComponent={<Line />}
+      type="grid"
+    />
+  }
+  groupComponent={
+    <g
+      role="presentation"
+    />
+  }
+  scale="linear"
+  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,
+      },
+    }
+  }
+  tickComponent={
+    <LineSegment
+      lineComponent={<Line />}
+      type="tick"
+    />
+  }
+  tickLabelComponent={
+    <VictoryLabel
+      capHeight={0.71}
+      direction="inherit"
+      lineHeight={1}
+      textComponent={<Text />}
+      tspanComponent={<TSpan />}
+    />
+  }
+/>
+`;
+
+exports[`renders component data 1`] = `
+<VictoryChart
+  containerComponent={
+    <VictoryContainer
+      className="VictoryContainer"
+      portalComponent={<Portal />}
+      portalZIndex={99}
+      responsive={true}
+    />
+  }
+  defaultAxes={
+    Object {
+      "dependent": <VictoryAxis
+        axisComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="axis"
+          />
+        }
+        axisLabelComponent={
+          <VictoryLabel
+            capHeight={0.71}
+            direction="inherit"
+            lineHeight={1}
+            textComponent={<Text />}
+            tspanComponent={<TSpan />}
+          />
+        }
+        containerComponent={
+          <VictoryContainer
+            className="VictoryContainer"
+            portalComponent={<Portal />}
+            portalZIndex={99}
+            responsive={true}
+          />
+        }
+        dependentAxis={true}
+        fixLabelOverlap={false}
+        gridComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="grid"
+          />
+        }
+        groupComponent={
+          <g
+            role="presentation"
+          />
+        }
+        scale="linear"
+        standalone={true}
+        theme={
+          Object {
+            "area": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "axis": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "axis": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeLinecap": "round",
+                  "strokeLinejoin": "round",
+                  "strokeWidth": 1,
+                },
+                "axisLabel": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 25,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+                "grid": Object {
+                  "fill": "none",
+                  "pointerEvents": "painted",
+                  "stroke": "none",
+                },
+                "tickLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "ticks": Object {
+                  "fill": "transparent",
+                  "size": 1,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "bar": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                  "padding": 8,
+                  "strokeWidth": 0,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "boxplot": Object {
+              "boxWidth": 20,
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "max": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "maxLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "median": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "medianLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "min": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "minLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "q1": Object {
+                  "fill": "#969696",
+                  "padding": 8,
+                },
+                "q1Labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "q3": Object {
+                  "fill": "#969696",
+                  "padding": 8,
+                },
+                "q3Labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "candlestick": Object {
+              "candleColors": Object {
+                "negative": "#252525",
+                "positive": "#ffffff",
+              },
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "chart": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "errorbar": Object {
+              "borderWidth": 8,
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeWidth": 2,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "group": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "legend": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "gutter": 10,
+              "orientation": "vertical",
+              "style": Object {
+                "data": Object {
+                  "type": "circle",
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "title": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 5,
+                  "stroke": "transparent",
+                },
+              },
+              "titleOrientation": "top",
+            },
+            "line": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeWidth": 2,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "pie": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 400,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 20,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 400,
+            },
+            "scatter": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                  "stroke": "transparent",
+                  "strokeWidth": 0,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "stack": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "tooltip": Object {
+              "cornerRadius": 5,
+              "flyoutStyle": Object {
+                "fill": "#f0f0f0",
+                "pointerEvents": "none",
+                "stroke": "#252525",
+                "strokeWidth": 1,
+              },
+              "pointerLength": 10,
+              "style": Object {
+                "fill": "#252525",
+                "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                "fontSize": 14,
+                "letterSpacing": "normal",
+                "padding": 5,
+                "pointerEvents": "none",
+                "stroke": "transparent",
+                "textAnchor": "middle",
+              },
+            },
+            "voronoi": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "transparent",
+                  "strokeWidth": 0,
+                },
+                "flyout": Object {
+                  "fill": "#f0f0f0",
+                  "pointerEvents": "none",
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 5,
+                  "pointerEvents": "none",
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+          }
+        }
+        tickComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="tick"
+          />
+        }
+        tickLabelComponent={
+          <VictoryLabel
+            capHeight={0.71}
+            direction="inherit"
+            lineHeight={1}
+            textComponent={<Text />}
+            tspanComponent={<TSpan />}
+          />
+        }
+      />,
+      "independent": <VictoryAxis
+        axisComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="axis"
+          />
+        }
+        axisLabelComponent={
+          <VictoryLabel
+            capHeight={0.71}
+            direction="inherit"
+            lineHeight={1}
+            textComponent={<Text />}
+            tspanComponent={<TSpan />}
+          />
+        }
+        containerComponent={
+          <VictoryContainer
+            className="VictoryContainer"
+            portalComponent={<Portal />}
+            portalZIndex={99}
+            responsive={true}
+          />
+        }
+        fixLabelOverlap={false}
+        gridComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="grid"
+          />
+        }
+        groupComponent={
+          <g
+            role="presentation"
+          />
+        }
+        scale="linear"
+        standalone={true}
+        theme={
+          Object {
+            "area": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "axis": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "axis": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeLinecap": "round",
+                  "strokeLinejoin": "round",
+                  "strokeWidth": 1,
+                },
+                "axisLabel": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 25,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+                "grid": Object {
+                  "fill": "none",
+                  "pointerEvents": "painted",
+                  "stroke": "none",
+                },
+                "tickLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "ticks": Object {
+                  "fill": "transparent",
+                  "size": 1,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "bar": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                  "padding": 8,
+                  "strokeWidth": 0,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "boxplot": Object {
+              "boxWidth": 20,
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "max": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "maxLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "median": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "medianLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "min": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "minLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "q1": Object {
+                  "fill": "#969696",
+                  "padding": 8,
+                },
+                "q1Labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "q3": Object {
+                  "fill": "#969696",
+                  "padding": 8,
+                },
+                "q3Labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "candlestick": Object {
+              "candleColors": Object {
+                "negative": "#252525",
+                "positive": "#ffffff",
+              },
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "chart": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "errorbar": Object {
+              "borderWidth": 8,
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeWidth": 2,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "group": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "legend": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "gutter": 10,
+              "orientation": "vertical",
+              "style": Object {
+                "data": Object {
+                  "type": "circle",
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "title": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 5,
+                  "stroke": "transparent",
+                },
+              },
+              "titleOrientation": "top",
+            },
+            "line": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeWidth": 2,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "pie": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 400,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 20,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 400,
+            },
+            "scatter": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                  "stroke": "transparent",
+                  "strokeWidth": 0,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "stack": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "tooltip": Object {
+              "cornerRadius": 5,
+              "flyoutStyle": Object {
+                "fill": "#f0f0f0",
+                "pointerEvents": "none",
+                "stroke": "#252525",
+                "strokeWidth": 1,
+              },
+              "pointerLength": 10,
+              "style": Object {
+                "fill": "#252525",
+                "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                "fontSize": 14,
+                "letterSpacing": "normal",
+                "padding": 5,
+                "pointerEvents": "none",
+                "stroke": "transparent",
+                "textAnchor": "middle",
+              },
+            },
+            "voronoi": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "transparent",
+                  "strokeWidth": 0,
+                },
+                "flyout": Object {
+                  "fill": "#f0f0f0",
+                  "pointerEvents": "none",
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 5,
+                  "pointerEvents": "none",
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+          }
+        }
+        tickComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="tick"
+          />
+        }
+        tickLabelComponent={
+          <VictoryLabel
+            capHeight={0.71}
+            direction="inherit"
+            lineHeight={1}
+            textComponent={<Text />}
+            tspanComponent={<TSpan />}
+          />
+        }
+      />,
+    }
+  }
+  defaultPolarAxes={
+    Object {
+      "dependent": <VictoryAxis
+        axisComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="axis"
+          />
+        }
+        axisLabelComponent={
+          <VictoryLabel
+            capHeight={0.71}
+            direction="inherit"
+            lineHeight={1}
+            textComponent={<Text />}
+            tspanComponent={<TSpan />}
+          />
+        }
+        circularAxisComponent={
+          <Arc
+            pathComponent={<Path />}
+            type="axis"
+          />
+        }
+        circularGridComponent={
+          <Arc
+            pathComponent={<Path />}
+            type="grid"
+          />
+        }
+        containerComponent={
+          <VictoryContainer
+            className="VictoryContainer"
+            portalComponent={<Portal />}
+            portalZIndex={99}
+            responsive={true}
+          />
+        }
+        dependentAxis={true}
+        endAngle={360}
+        gridComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="grid"
+          />
+        }
+        groupComponent={
+          <g
+            role="presentation"
+          />
+        }
+        labelPlacement="parallel"
+        scale="linear"
+        standalone={true}
+        startAngle={0}
+        theme={
+          Object {
+            "area": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "axis": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "axis": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeLinecap": "round",
+                  "strokeLinejoin": "round",
+                  "strokeWidth": 1,
+                },
+                "axisLabel": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 25,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+                "grid": Object {
+                  "fill": "none",
+                  "pointerEvents": "painted",
+                  "stroke": "none",
+                },
+                "tickLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "ticks": Object {
+                  "fill": "transparent",
+                  "size": 1,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "bar": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                  "padding": 8,
+                  "strokeWidth": 0,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "boxplot": Object {
+              "boxWidth": 20,
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "max": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "maxLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "median": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "medianLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "min": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "minLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "q1": Object {
+                  "fill": "#969696",
+                  "padding": 8,
+                },
+                "q1Labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "q3": Object {
+                  "fill": "#969696",
+                  "padding": 8,
+                },
+                "q3Labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "candlestick": Object {
+              "candleColors": Object {
+                "negative": "#252525",
+                "positive": "#ffffff",
+              },
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "chart": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "errorbar": Object {
+              "borderWidth": 8,
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeWidth": 2,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "group": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "legend": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "gutter": 10,
+              "orientation": "vertical",
+              "style": Object {
+                "data": Object {
+                  "type": "circle",
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "title": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 5,
+                  "stroke": "transparent",
+                },
+              },
+              "titleOrientation": "top",
+            },
+            "line": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeWidth": 2,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "pie": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 400,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 20,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 400,
+            },
+            "scatter": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                  "stroke": "transparent",
+                  "strokeWidth": 0,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "stack": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "tooltip": Object {
+              "cornerRadius": 5,
+              "flyoutStyle": Object {
+                "fill": "#f0f0f0",
+                "pointerEvents": "none",
+                "stroke": "#252525",
+                "strokeWidth": 1,
+              },
+              "pointerLength": 10,
+              "style": Object {
+                "fill": "#252525",
+                "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                "fontSize": 14,
+                "letterSpacing": "normal",
+                "padding": 5,
+                "pointerEvents": "none",
+                "stroke": "transparent",
+                "textAnchor": "middle",
+              },
+            },
+            "voronoi": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "transparent",
+                  "strokeWidth": 0,
+                },
+                "flyout": Object {
+                  "fill": "#f0f0f0",
+                  "pointerEvents": "none",
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 5,
+                  "pointerEvents": "none",
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+          }
+        }
+        tickComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="tick"
+          />
+        }
+        tickLabelComponent={
+          <VictoryLabel
+            capHeight={0.71}
+            direction="inherit"
+            lineHeight={1}
+            textComponent={<Text />}
+            tspanComponent={<TSpan />}
+          />
+        }
+      />,
+      "independent": <VictoryAxis
+        axisComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="axis"
+          />
+        }
+        axisLabelComponent={
+          <VictoryLabel
+            capHeight={0.71}
+            direction="inherit"
+            lineHeight={1}
+            textComponent={<Text />}
+            tspanComponent={<TSpan />}
+          />
+        }
+        circularAxisComponent={
+          <Arc
+            pathComponent={<Path />}
+            type="axis"
+          />
+        }
+        circularGridComponent={
+          <Arc
+            pathComponent={<Path />}
+            type="grid"
+          />
+        }
+        containerComponent={
+          <VictoryContainer
+            className="VictoryContainer"
+            portalComponent={<Portal />}
+            portalZIndex={99}
+            responsive={true}
+          />
+        }
+        endAngle={360}
+        gridComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="grid"
+          />
+        }
+        groupComponent={
+          <g
+            role="presentation"
+          />
+        }
+        labelPlacement="parallel"
+        scale="linear"
+        standalone={true}
+        startAngle={0}
+        theme={
+          Object {
+            "area": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "axis": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "axis": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeLinecap": "round",
+                  "strokeLinejoin": "round",
+                  "strokeWidth": 1,
+                },
+                "axisLabel": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 25,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+                "grid": Object {
+                  "fill": "none",
+                  "pointerEvents": "painted",
+                  "stroke": "none",
+                },
+                "tickLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "ticks": Object {
+                  "fill": "transparent",
+                  "size": 1,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "bar": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                  "padding": 8,
+                  "strokeWidth": 0,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "boxplot": Object {
+              "boxWidth": 20,
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "max": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "maxLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "median": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "medianLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "min": Object {
+                  "padding": 8,
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "minLabels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "q1": Object {
+                  "fill": "#969696",
+                  "padding": 8,
+                },
+                "q1Labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "q3": Object {
+                  "fill": "#969696",
+                  "padding": 8,
+                },
+                "q3Labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 450,
+            },
+            "candlestick": Object {
+              "candleColors": Object {
+                "negative": "#252525",
+                "positive": "#ffffff",
+              },
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "chart": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "errorbar": Object {
+              "borderWidth": 8,
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeWidth": 2,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "group": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "legend": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "gutter": 10,
+              "orientation": "vertical",
+              "style": Object {
+                "data": Object {
+                  "type": "circle",
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                },
+                "title": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 5,
+                  "stroke": "transparent",
+                },
+              },
+              "titleOrientation": "top",
+            },
+            "line": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "#252525",
+                  "strokeWidth": 2,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "pie": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 400,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 20,
+                  "stroke": "transparent",
+                },
+              },
+              "width": 400,
+            },
+            "scatter": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "#252525",
+                  "stroke": "transparent",
+                  "strokeWidth": 0,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 10,
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+            "stack": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "width": 450,
+            },
+            "tooltip": Object {
+              "cornerRadius": 5,
+              "flyoutStyle": Object {
+                "fill": "#f0f0f0",
+                "pointerEvents": "none",
+                "stroke": "#252525",
+                "strokeWidth": 1,
+              },
+              "pointerLength": 10,
+              "style": Object {
+                "fill": "#252525",
+                "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                "fontSize": 14,
+                "letterSpacing": "normal",
+                "padding": 5,
+                "pointerEvents": "none",
+                "stroke": "transparent",
+                "textAnchor": "middle",
+              },
+            },
+            "voronoi": Object {
+              "colorScale": Array [
+                "#252525",
+                "#525252",
+                "#737373",
+                "#969696",
+                "#bdbdbd",
+                "#d9d9d9",
+                "#f0f0f0",
+              ],
+              "height": 300,
+              "padding": 50,
+              "style": Object {
+                "data": Object {
+                  "fill": "transparent",
+                  "stroke": "transparent",
+                  "strokeWidth": 0,
+                },
+                "flyout": Object {
+                  "fill": "#f0f0f0",
+                  "pointerEvents": "none",
+                  "stroke": "#252525",
+                  "strokeWidth": 1,
+                },
+                "labels": Object {
+                  "fill": "#252525",
+                  "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif",
+                  "fontSize": 14,
+                  "letterSpacing": "normal",
+                  "padding": 5,
+                  "pointerEvents": "none",
+                  "stroke": "transparent",
+                  "textAnchor": "middle",
+                },
+              },
+              "width": 450,
+            },
+          }
+        }
+        tickComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            type="tick"
+          />
+        }
+        tickLabelComponent={
+          <VictoryLabel
+            capHeight={0.71}
+            direction="inherit"
+            lineHeight={1}
+            textComponent={<Text />}
+            tspanComponent={<TSpan />}
+          />
+        }
+      />,
+    }
+  }
+  domainPadding={
+    Object {
+      "x": Array [
+        30,
+        25,
+      ],
+    }
+  }
+  groupComponent={<g />}
+  height={200}
+  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,
+      },
+    }
+  }
+  width={300}
+>
+  <ChartGroup>
+    <ChartLine
+      data={
+        Array [
+          Object {
+            "x": 1,
+            "y": 1,
+          },
+          Object {
+            "x": 2,
+            "y": 2,
+          },
+          Object {
+            "x": 3,
+            "y": 5,
+          },
+          Object {
+            "x": 4,
+            "y": 3,
+          },
+        ]
+      }
+    />
+    <ChartLine
+      data={
+        Array [
+          Object {
+            "x": 1,
+            "y": 2,
+          },
+          Object {
+            "x": 2,
+            "y": 1,
+          },
+          Object {
+            "x": 3,
+            "y": 7,
+          },
+          Object {
+            "x": 4,
+            "y": 4,
+          },
+        ]
+      }
+    />
+    <ChartLine
+      data={
+        Array [
+          Object {
+            "x": 1,
+            "y": 3,
+          },
+          Object {
+            "x": 2,
+            "y": 4,
+          },
+          Object {
+            "x": 3,
+            "y": 9,
+          },
+          Object {
+            "x": 4,
+            "y": 5,
+          },
+        ]
+      }
+    />
+    <ChartLine
+      data={
+        Array [
+          Object {
+            "x": 1,
+            "y": 3,
+          },
+          Object {
+            "x": 2,
+            "y": 3,
+          },
+          Object {
+            "x": 3,
+            "y": 8,
+          },
+          Object {
+            "x": 4,
+            "y": 7,
+          },
+        ]
+      }
+    />
+  </ChartGroup>
+  <ChartAxis
+    tickValues={
+      Array [
+        2,
+        3,
+        4,
+      ]
+    }
+  />
+  <ChartAxis
+    dependentAxis={true}
+    tickValues={
+      Array [
+        2,
+        5,
+        8,
+      ]
+    }
+  />
+</VictoryChart>
+`;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartAxis/index.d.ts b/packages/patternfly-4/react-charts/src/components/ChartAxis/index.d.ts
new file mode 100644
index 00000000000..668ae3b667b
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartAxis/index.d.ts
@@ -0,0 +1 @@
+export { default as ChartAxis, ChartAxisProps} from './ChartAxis';
diff --git a/packages/patternfly-4/react-charts/src/components/ChartAxis/index.js b/packages/patternfly-4/react-charts/src/components/ChartAxis/index.js
new file mode 100644
index 00000000000..33c9437c8a5
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartAxis/index.js
@@ -0,0 +1 @@
+export { default as ChartAxis } from './ChartAxis';
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..a566a2c929b 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
@@ -13,6 +13,8 @@ class SimpleChart extends React.Component {
         <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 }]} />
       </ChartGroup>
+      <ChartAxis tickValues={[2, 3, 4]} />
+      <ChartAxis dependentAxis tickValues={[2, 5, 8]} />
     </Chart>
   );
 
diff --git a/packages/patternfly-4/react-charts/src/components/index.d.ts b/packages/patternfly-4/react-charts/src/components/index.d.ts
index d518c8be76d..7dcd9f71b30 100644
--- a/packages/patternfly-4/react-charts/src/components/index.d.ts
+++ b/packages/patternfly-4/react-charts/src/components/index.d.ts
@@ -1,6 +1,7 @@
 /** Keep alphabetically sorted */
 export * from './Chart';
 export * from './ChartArea';
+export * from './ChartAxis';
 export * from './ChartBar';
 export * from './ChartContainer';
 export * from './ChartDonut';
diff --git a/packages/patternfly-4/react-charts/src/components/index.js b/packages/patternfly-4/react-charts/src/components/index.js
index d518c8be76d..7dcd9f71b30 100644
--- a/packages/patternfly-4/react-charts/src/components/index.js
+++ b/packages/patternfly-4/react-charts/src/components/index.js
@@ -1,6 +1,7 @@
 /** Keep alphabetically sorted */
 export * from './Chart';
 export * from './ChartArea';
+export * from './ChartAxis';
 export * from './ChartBar';
 export * from './ChartContainer';
 export * from './ChartDonut';