diff --git a/.lintstagedrc b/.lintstagedrc
index de6575f23..46a6d9a68 100644
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -1,5 +1,6 @@
 {
   "src/**/*.{ts,tsx}": ["eslint", "prettier --write"],
   "stories/**/*.{ts,tsx}": ["eslint", "prettier --write"],
+  "sandboxes/**/*.{ts,tsx}": ["eslint", "prettier --write"],
   "test/**/*.{ts,tsx}": ["eslint", "prettier --write"]
 }
diff --git a/.storybook/main.js b/.storybook/main.js
index fc35aea90..9a4176325 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,10 +1,14 @@
+const path = require('path');
+
 module.exports = {
-  stories: [
-    '../stories/*.tsx'
-  ],
+  stories: ['../stories/*.tsx'],
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-controls',
     '@storybook/addon-actions',
   ],
-}
+  webpackFinal(config) {
+    config.resolve.alias['react-chartjs-2'] = path.resolve(__dirname, '../src');
+    return config;
+  },
+};
diff --git a/.storybook/manager.js b/.storybook/manager.js
index 69e2b1db7..d64c248bf 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,8 +1,8 @@
 import { addons } from '@storybook/addons';
 
-import { theme } from './theme'
+import { theme } from './theme';
 
 addons.setConfig({
   theme,
   panelPosition: 'right',
-})
+});
diff --git a/.storybook/preview.js b/.storybook/preview.js
index c3e2c124c..0578373f4 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,5 @@
-import { configureActions } from '@storybook/addon-actions'
+import { configureActions } from '@storybook/addon-actions';
 
 configureActions({
   depth: 5,
-})
+});
diff --git a/package.json b/package.json
index c78ac8ea6..9ba58d55a 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "build": "rollup -c & yarn emitDeclarations",
     "prepublishOnly": "yarn build",
     "start:storybook": "start-storybook -p 6006 --ci",
-    "test:lint": "eslint 'src/**/*.{ts,tsx}' 'stories/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
+    "test:lint": "eslint 'src/**/*.{ts,tsx}' 'stories/**/*.{ts,tsx}' 'sandboxes/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
     "test:unit": "jest -c jest.config.json",
     "test:build": "yarn build",
     "test:size": "size-limit",
@@ -66,6 +66,7 @@
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.150",
     "@types/react": "^17.0.28",
+    "@types/react-dom": "^17.0.10",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "browserslist": "^4.17.3",
@@ -103,7 +104,12 @@
     "webpack": "^5.58.2"
   },
   "tsd": {
-    "directory": "./test"
+    "directory": "./test",
+    "compilerOptions": {
+      "paths": {
+        "react-chartjs-2": ["./src"]
+      }
+    }
   },
   "files": [
     "dist"
diff --git a/sandboxes/bar/grouped/App.tsx b/sandboxes/bar/grouped/App.tsx
new file mode 100644
index 000000000..23c51eb97
--- /dev/null
+++ b/sandboxes/bar/grouped/App.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  plugins: {
+    title: {
+      display: true,
+      text: 'Chart.js Bar Chart - Stacked',
+    },
+  },
+  responsive: true,
+  interaction: {
+    mode: 'index' as const,
+    intersect: false,
+  },
+  scales: {
+    x: {
+      stacked: true,
+    },
+    y: {
+      stacked: true,
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(255, 99, 132)',
+      stack: 'Stack 0',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(75, 192, 192)',
+      stack: 'Stack 0',
+    },
+    {
+      label: 'Dataset 3',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(53, 162, 235)',
+      stack: 'Stack 1',
+    },
+  ],
+};
+
+export function App() {
+  return <Bar options={options} data={data} />;
+}
diff --git a/sandboxes/bar/grouped/index.tsx b/sandboxes/bar/grouped/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/bar/grouped/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/bar/grouped/package.json b/sandboxes/bar/grouped/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/bar/grouped/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/bar/horizontal/App.tsx b/sandboxes/bar/horizontal/App.tsx
new file mode 100644
index 000000000..d0b8fbb70
--- /dev/null
+++ b/sandboxes/bar/horizontal/App.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  indexAxis: 'y' as const,
+  elements: {
+    bar: {
+      borderWidth: 2,
+    },
+  },
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'right' as const,
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Horizontal Bar Chart',
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(255, 99, 132)',
+      backgroundColor: 'rgba(255, 99, 132, 0.5)',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(53, 162, 235)',
+      backgroundColor: 'rgba(53, 162, 235, 0.5)',
+    },
+  ],
+};
+
+export function App() {
+  return <Bar options={options} data={data} />;
+}
diff --git a/sandboxes/bar/horizontal/index.tsx b/sandboxes/bar/horizontal/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/bar/horizontal/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/bar/horizontal/package.json b/sandboxes/bar/horizontal/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/bar/horizontal/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/bar/stacked/App.tsx b/sandboxes/bar/stacked/App.tsx
new file mode 100644
index 000000000..0305fba0c
--- /dev/null
+++ b/sandboxes/bar/stacked/App.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  plugins: {
+    title: {
+      display: true,
+      text: 'Chart.js Bar Chart - Stacked',
+    },
+  },
+  responsive: true,
+  scales: {
+    x: {
+      stacked: true,
+    },
+    y: {
+      stacked: true,
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(255, 99, 132)',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(75, 192, 192)',
+    },
+    {
+      label: 'Dataset 3',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(53, 162, 235)',
+    },
+  ],
+};
+
+export function App() {
+  return <Bar options={options} data={data} />;
+}
diff --git a/sandboxes/bar/stacked/index.tsx b/sandboxes/bar/stacked/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/bar/stacked/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/bar/stacked/package.json b/sandboxes/bar/stacked/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/bar/stacked/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/bar/vertical/App.tsx b/sandboxes/bar/vertical/App.tsx
new file mode 100644
index 000000000..0a70aeb78
--- /dev/null
+++ b/sandboxes/bar/vertical/App.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'top' as const,
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Bar Chart',
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
+      backgroundColor: 'rgba(255, 99, 132, 0.5)',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
+      backgroundColor: 'rgba(53, 162, 235, 0.5)',
+    },
+  ],
+};
+
+export function App() {
+  return <Bar options={options} data={data} />;
+}
diff --git a/sandboxes/bar/vertical/index.tsx b/sandboxes/bar/vertical/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/bar/vertical/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/bar/vertical/package.json b/sandboxes/bar/vertical/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/bar/vertical/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/chart/canvas/App.tsx b/sandboxes/chart/canvas/App.tsx
new file mode 100644
index 000000000..c7cb946c2
--- /dev/null
+++ b/sandboxes/chart/canvas/App.tsx
@@ -0,0 +1,75 @@
+import React, { useRef, useEffect, useState } from 'react';
+import Chart from 'react-chartjs-2';
+import type { Chart as ChartJS, ChartData, ChartArea } from 'chart.js';
+import faker from 'faker';
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+const colors = [
+  'red',
+  'orange',
+  'yellow',
+  'lime',
+  'green',
+  'teal',
+  'blue',
+  'purple',
+];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+    },
+  ],
+};
+
+function createGradient(ctx: CanvasRenderingContext2D, area: ChartArea) {
+  const colorStart = faker.random.arrayElement(colors);
+  const colorMid = faker.random.arrayElement(
+    colors.filter(color => color !== colorStart)
+  );
+  const colorEnd = faker.random.arrayElement(
+    colors.filter(color => color !== colorStart && color !== colorMid)
+  );
+
+  const gradient = ctx.createLinearGradient(0, area.bottom, 0, area.top);
+
+  gradient.addColorStop(0, colorStart);
+  gradient.addColorStop(0.5, colorMid);
+  gradient.addColorStop(1, colorEnd);
+
+  return gradient;
+}
+
+export function App() {
+  const chartRef = useRef<ChartJS>(null);
+  const [chartData, setChartData] = useState<ChartData<'bar'>>({
+    datasets: [],
+  });
+
+  useEffect(() => {
+    const chart = chartRef.current;
+
+    if (!chart) {
+      return;
+    }
+
+    const chartData = {
+      ...data,
+      datasets: data.datasets.map(dataset => ({
+        ...dataset,
+        borderColor: createGradient(chart.ctx, chart.chartArea),
+      })),
+    };
+
+    setChartData(chartData);
+  }, []);
+
+  return <Chart ref={chartRef} type='line' data={chartData} />;
+}
diff --git a/sandboxes/chart/canvas/index.tsx b/sandboxes/chart/canvas/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/chart/canvas/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/chart/canvas/package.json b/sandboxes/chart/canvas/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/chart/canvas/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/chart/events/App.tsx b/sandboxes/chart/events/App.tsx
new file mode 100644
index 000000000..bac5d153a
--- /dev/null
+++ b/sandboxes/chart/events/App.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import Chart from 'react-chartjs-2';
+import type { InteractionItem } from 'chart.js';
+import faker from 'faker';
+
+export const options = {
+  scales: {
+    y: {
+      beginAtZero: true,
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      type: 'line' as const,
+      label: 'Dataset 1',
+      borderColor: 'rgb(255, 99, 132)',
+      borderWidth: 2,
+      fill: false,
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+    },
+    {
+      type: 'bar' as const,
+      label: 'Dataset 2',
+      backgroundColor: 'rgb(75, 192, 192)',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'white',
+      borderWidth: 2,
+    },
+    {
+      type: 'bar' as const,
+      label: 'Dataset 3',
+      backgroundColor: 'rgb(53, 162, 235)',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+    },
+  ],
+};
+
+export function App() {
+  const getDatasetAtEvent = (dataset: InteractionItem[]) => {
+    if (!dataset.length) return;
+
+    const datasetIndex = dataset[0].datasetIndex;
+
+    console.log(data.datasets[datasetIndex].label);
+  };
+
+  const getElementAtEvent = (element: InteractionItem[]) => {
+    if (!element.length) return;
+
+    const { datasetIndex, index } = element[0];
+
+    console.log(data.labels[index], data.datasets[datasetIndex].data[index]);
+  };
+
+  const getElementsAtEvent = (elements: InteractionItem[]) => {
+    if (!elements.length) return;
+
+    console.log(elements.length);
+  };
+
+  return (
+    <Chart
+      type='bar'
+      getDatasetAtEvent={getDatasetAtEvent}
+      getElementAtEvent={getElementAtEvent}
+      getElementsAtEvent={getElementsAtEvent}
+      options={options}
+      data={data}
+    />
+  );
+}
diff --git a/sandboxes/chart/events/index.tsx b/sandboxes/chart/events/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/chart/events/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/chart/events/package.json b/sandboxes/chart/events/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/chart/events/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/chart/multitype/App.tsx b/sandboxes/chart/multitype/App.tsx
new file mode 100644
index 000000000..d60570dae
--- /dev/null
+++ b/sandboxes/chart/multitype/App.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Chart from 'react-chartjs-2';
+import faker from 'faker';
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      type: 'line' as const,
+      label: 'Dataset 1',
+      borderColor: 'rgb(255, 99, 132)',
+      borderWidth: 2,
+      fill: false,
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+    },
+    {
+      type: 'bar' as const,
+      label: 'Dataset 2',
+      backgroundColor: 'rgb(75, 192, 192)',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'white',
+      borderWidth: 2,
+    },
+    {
+      type: 'bar' as const,
+      label: 'Dataset 3',
+      backgroundColor: 'rgb(53, 162, 235)',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+    },
+  ],
+};
+
+export function App() {
+  return <Chart type='bar' data={data} />;
+}
diff --git a/sandboxes/chart/multitype/index.tsx b/sandboxes/chart/multitype/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/chart/multitype/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/chart/multitype/package.json b/sandboxes/chart/multitype/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/chart/multitype/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/chart/ref/App.tsx b/sandboxes/chart/ref/App.tsx
new file mode 100644
index 000000000..e81600916
--- /dev/null
+++ b/sandboxes/chart/ref/App.tsx
@@ -0,0 +1,79 @@
+import React, { useRef, useEffect } from 'react';
+import Chart from 'react-chartjs-2';
+import type { Chart as ChartJS } from 'chart.js';
+import faker from 'faker';
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      type: 'line' as const,
+      label: 'Dataset 1',
+      borderColor: 'rgb(255, 99, 132)',
+      borderWidth: 2,
+      fill: false,
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+    },
+    {
+      type: 'bar' as const,
+      label: 'Dataset 2',
+      backgroundColor: 'rgb(75, 192, 192)',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'white',
+      borderWidth: 2,
+    },
+    {
+      type: 'bar' as const,
+      label: 'Dataset 3',
+      backgroundColor: 'rgb(53, 162, 235)',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+    },
+  ],
+};
+
+function triggerTooltip(chart: ChartJS | null) {
+  const tooltip = chart?.tooltip;
+
+  if (!tooltip) {
+    return;
+  }
+
+  if (tooltip.getActiveElements().length > 0) {
+    tooltip.setActiveElements([], { x: 0, y: 0 });
+  } else {
+    const { chartArea } = chart;
+
+    tooltip.setActiveElements(
+      [
+        {
+          datasetIndex: 0,
+          index: 2,
+        },
+        {
+          datasetIndex: 1,
+          index: 2,
+        },
+      ],
+      {
+        x: (chartArea.left + chartArea.right) / 2,
+        y: (chartArea.top + chartArea.bottom) / 2,
+      }
+    );
+  }
+
+  chart.update();
+}
+
+export function App() {
+  const chartRef = useRef<ChartJS>(null);
+
+  useEffect(() => {
+    const chart = chartRef.current;
+
+    triggerTooltip(chart);
+  }, []);
+
+  return <Chart ref={chartRef} type='bar' data={data} />;
+}
diff --git a/sandboxes/chart/ref/index.tsx b/sandboxes/chart/ref/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/chart/ref/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/chart/ref/package.json b/sandboxes/chart/ref/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/chart/ref/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/stories/Pie.data.ts b/sandboxes/doughnut/default/App.tsx
similarity index 80%
rename from stories/Pie.data.ts
rename to sandboxes/doughnut/default/App.tsx
index 0dcee5995..bc3bc619c 100644
--- a/stories/Pie.data.ts
+++ b/sandboxes/doughnut/default/App.tsx
@@ -1,4 +1,5 @@
-import faker from 'faker';
+import React from 'react';
+import { Doughnut } from 'react-chartjs-2';
 
 export const data = {
   labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
@@ -27,9 +28,6 @@ export const data = {
   ],
 };
 
-export function randomDataset() {
-  return {
-    value: faker.datatype.number({ min: -100, max: 100 }),
-    color: faker.internet.color(),
-  };
+export function App() {
+  return <Doughnut data={data} />;
 }
diff --git a/sandboxes/doughnut/default/index.tsx b/sandboxes/doughnut/default/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/doughnut/default/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/doughnut/default/package.json b/sandboxes/doughnut/default/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/doughnut/default/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/line/default/App.tsx b/sandboxes/line/default/App.tsx
new file mode 100644
index 000000000..0c4974530
--- /dev/null
+++ b/sandboxes/line/default/App.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'top' as const,
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Line Chart',
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(255, 99, 132)',
+      backgroundColor: 'rgba(255, 99, 132, 0.5)',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(53, 162, 235)',
+      backgroundColor: 'rgba(53, 162, 235, 0.5)',
+    },
+  ],
+};
+
+export function App() {
+  return <Line options={options} data={data} />;
+}
diff --git a/sandboxes/line/default/index.tsx b/sandboxes/line/default/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/line/default/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/line/default/package.json b/sandboxes/line/default/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/line/default/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/line/multiaxis/App.tsx b/sandboxes/line/multiaxis/App.tsx
new file mode 100644
index 000000000..b12e310eb
--- /dev/null
+++ b/sandboxes/line/multiaxis/App.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  responsive: true,
+  interaction: {
+    mode: 'index' as const,
+    intersect: false,
+  },
+  stacked: false,
+  plugins: {
+    title: {
+      display: true,
+      text: 'Chart.js Line Chart - Multi Axis',
+    },
+  },
+  scales: {
+    y: {
+      type: 'linear' as const,
+      display: true,
+      position: 'left' as const,
+    },
+    y1: {
+      type: 'linear' as const,
+      display: true,
+      position: 'right' as const,
+      grid: {
+        drawOnChartArea: false,
+      },
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(255, 99, 132)',
+      backgroundColor: 'rgba(255, 99, 132, 0.5)',
+      yAxisID: 'y',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(53, 162, 235)',
+      backgroundColor: 'rgba(53, 162, 235, 0.5)',
+      yAxisID: 'y1',
+    },
+  ],
+};
+
+export function App() {
+  return <Line options={options} data={data} />;
+}
diff --git a/sandboxes/line/multiaxis/index.tsx b/sandboxes/line/multiaxis/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/line/multiaxis/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/line/multiaxis/package.json b/sandboxes/line/multiaxis/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/line/multiaxis/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/stories/Doughnut.data.ts b/sandboxes/pie/default/App.tsx
similarity index 84%
rename from stories/Doughnut.data.ts
rename to sandboxes/pie/default/App.tsx
index 4df6a4699..aecaa5619 100644
--- a/stories/Doughnut.data.ts
+++ b/sandboxes/pie/default/App.tsx
@@ -1,3 +1,6 @@
+import React from 'react';
+import { Pie } from 'react-chartjs-2';
+
 export const data = {
   labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
   datasets: [
@@ -24,3 +27,7 @@ export const data = {
     },
   ],
 };
+
+export function App() {
+  return <Pie data={data} />;
+}
diff --git a/sandboxes/pie/default/index.tsx b/sandboxes/pie/default/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/pie/default/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/pie/default/package.json b/sandboxes/pie/default/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/pie/default/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/stories/PolarArea.data.ts b/sandboxes/polarArea/default/App.tsx
similarity index 76%
rename from stories/PolarArea.data.ts
rename to sandboxes/polarArea/default/App.tsx
index adcd464f7..0a6188079 100644
--- a/stories/PolarArea.data.ts
+++ b/sandboxes/polarArea/default/App.tsx
@@ -1,3 +1,6 @@
+import React from 'react';
+import { PolarArea } from 'react-chartjs-2';
+
 export const data = {
   labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
   datasets: [
@@ -16,3 +19,7 @@ export const data = {
     },
   ],
 };
+
+export function App() {
+  return <PolarArea data={data} />;
+}
diff --git a/sandboxes/polarArea/default/index.tsx b/sandboxes/polarArea/default/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/polarArea/default/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/polarArea/default/package.json b/sandboxes/polarArea/default/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/polarArea/default/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/stories/Radar.data.ts b/sandboxes/radar/default/App.tsx
similarity index 71%
rename from stories/Radar.data.ts
rename to sandboxes/radar/default/App.tsx
index f29b8304a..3459d7afc 100644
--- a/stories/Radar.data.ts
+++ b/sandboxes/radar/default/App.tsx
@@ -1,8 +1,5 @@
-export const options = {
-  scale: {
-    ticks: { beginAtZero: true },
-  },
-};
+import React from 'react';
+import { Radar } from 'react-chartjs-2';
 
 export const data = {
   labels: ['Thing 1', 'Thing 2', 'Thing 3', 'Thing 4', 'Thing 5', 'Thing 6'],
@@ -16,3 +13,7 @@ export const data = {
     },
   ],
 };
+
+export function App() {
+  return <Radar data={data} />;
+}
diff --git a/sandboxes/radar/default/index.tsx b/sandboxes/radar/default/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/radar/default/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/radar/default/package.json b/sandboxes/radar/default/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/radar/default/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/scatter/default/App.tsx b/sandboxes/scatter/default/App.tsx
new file mode 100644
index 000000000..6af387018
--- /dev/null
+++ b/sandboxes/scatter/default/App.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Scatter } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  scales: {
+    y: {
+      beginAtZero: true,
+    },
+  },
+};
+
+export const data = {
+  datasets: [
+    {
+      label: 'A dataset',
+      data: Array.from({ length: 100 }, () => ({
+        x: faker.datatype.number({ min: -100, max: 100 }),
+        y: faker.datatype.number({ min: -100, max: 100 }),
+      })),
+      backgroundColor: 'rgba(255, 99, 132, 1)',
+    },
+  ],
+};
+
+export function App() {
+  return <Scatter options={options} data={data} />;
+}
diff --git a/sandboxes/scatter/default/index.tsx b/sandboxes/scatter/default/index.tsx
new file mode 100644
index 000000000..4a75b54d0
--- /dev/null
+++ b/sandboxes/scatter/default/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);
diff --git a/sandboxes/scatter/default/package.json b/sandboxes/scatter/default/package.json
new file mode 100644
index 000000000..33d590fe8
--- /dev/null
+++ b/sandboxes/scatter/default/package.json
@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}
diff --git a/sandboxes/tsconfig.json b/sandboxes/tsconfig.json
new file mode 100644
index 000000000..1acab88d8
--- /dev/null
+++ b/sandboxes/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "react-chartjs-2": ["../src"]
+    }
+  },
+  "include": ["./"]
+}
diff --git a/stories/Bar.data.ts b/stories/Bar.data.ts
deleted file mode 100644
index e4aec5253..000000000
--- a/stories/Bar.data.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import {
-  months,
-  colorRed,
-  colorRed05,
-  colorGreen,
-  colorBlue,
-  colorBlue05,
-  numbers,
-} from './data';
-
-export const verticalOptions = {
-  responsive: true,
-  plugins: {
-    legend: {
-      position: 'top',
-    },
-    title: {
-      display: true,
-      text: 'Chart.js Bar Chart',
-    },
-  },
-};
-
-export const verticalData = {
-  labels: months,
-  datasets: [
-    {
-      label: 'Dataset 1',
-      data: numbers(),
-      borderColor: colorRed,
-      backgroundColor: colorRed05,
-    },
-    {
-      label: 'Dataset 2',
-      data: numbers(),
-      borderColor: colorBlue,
-      backgroundColor: colorBlue05,
-    },
-  ],
-};
-
-export const horizontalOptions = {
-  indexAxis: 'y',
-  // Elements options apply to all of the options unless overridden in a dataset
-  // In this case, we are setting the border of each horizontal bar to be 2px wide
-  elements: {
-    bar: {
-      borderWidth: 2,
-    },
-  },
-  responsive: true,
-  plugins: {
-    legend: {
-      position: 'right',
-    },
-    title: {
-      display: true,
-      text: 'Chart.js Horizontal Bar Chart',
-    },
-  },
-};
-
-export const horizontalData = verticalData;
-
-export const stackedOptions = {
-  plugins: {
-    title: {
-      display: true,
-      text: 'Chart.js Bar Chart - Stacked',
-    },
-  },
-  responsive: true,
-  scales: {
-    x: {
-      stacked: true,
-    },
-    y: {
-      stacked: true,
-    },
-  },
-};
-
-export const stackedData = {
-  labels: months,
-  datasets: [
-    {
-      label: 'Dataset 1',
-      data: numbers(),
-      backgroundColor: colorRed,
-    },
-    {
-      label: 'Dataset 2',
-      data: numbers(),
-      backgroundColor: colorBlue,
-    },
-    {
-      label: 'Dataset 3',
-      data: numbers(),
-      backgroundColor: colorGreen,
-    },
-  ],
-};
-
-export const groupedOptions = {
-  plugins: {
-    title: {
-      display: true,
-      text: 'Chart.js Bar Chart - Stacked',
-    },
-  },
-  responsive: true,
-  interaction: {
-    mode: 'index',
-    intersect: false,
-  },
-  scales: {
-    x: {
-      stacked: true,
-    },
-    y: {
-      stacked: true,
-    },
-  },
-};
-
-export const groupedData = {
-  labels: months,
-  datasets: [
-    {
-      label: 'Dataset 1',
-      data: numbers(),
-      backgroundColor: colorRed,
-      stack: 'Stack 0',
-    },
-    {
-      label: 'Dataset 2',
-      data: numbers(),
-      backgroundColor: colorBlue,
-      stack: 'Stack 0',
-    },
-    {
-      label: 'Dataset 3',
-      data: numbers(),
-      backgroundColor: colorGreen,
-      stack: 'Stack 1',
-    },
-  ],
-};
diff --git a/stories/Bar.tsx b/stories/Bar.tsx
index 8bf14fa8f..f43580abd 100644
--- a/stories/Bar.tsx
+++ b/stories/Bar.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { Bar } from '../src';
-import * as data from './Bar.data';
+import * as verticalBar from '../sandboxes/bar/vertical/App';
+import * as horizontalBar from '../sandboxes/bar/horizontal/App';
+import * as stackedBar from '../sandboxes/bar/stacked/App';
+import * as groupedBar from '../sandboxes/bar/grouped/App';
 
 export default {
   title: 'Components/Bar',
@@ -17,27 +20,27 @@ export default {
 export const Vertical = args => <Bar {...args} />;
 
 Vertical.args = {
-  data: data.verticalData,
-  options: data.verticalOptions,
+  data: verticalBar.data,
+  options: verticalBar.options,
 };
 
 export const Horizontal = args => <Bar {...args} />;
 
 Horizontal.args = {
-  data: data.horizontalData,
-  options: data.horizontalOptions,
+  data: horizontalBar.data,
+  options: horizontalBar.options,
 };
 
 export const Stacked = args => <Bar {...args} />;
 
 Stacked.args = {
-  data: data.stackedData,
-  options: data.stackedOptions,
+  data: stackedBar.data,
+  options: stackedBar.options,
 };
 
 export const Grouped = args => <Bar {...args} />;
 
 Grouped.args = {
-  data: data.groupedData,
-  options: data.groupedOptions,
+  data: groupedBar.data,
+  options: groupedBar.options,
 };
diff --git a/stories/Chart.data.ts b/stories/Chart.data.ts
index 13da7db5e..5e5f82e25 100644
--- a/stories/Chart.data.ts
+++ b/stories/Chart.data.ts
@@ -1,39 +1,5 @@
 import faker from 'faker';
-import { months, colorRed, colorGreen, colorBlue, numbers } from './data';
-
-export const multiTypeData = {
-  labels: months,
-  datasets: [
-    {
-      type: 'line' as const,
-      label: 'Dataset 1',
-      borderColor: colorRed,
-      borderWidth: 2,
-      fill: false,
-      data: Array.from({ length: 6 }, () =>
-        faker.datatype.number({ min: -10, max: 10 })
-      ),
-    },
-    {
-      type: 'bar' as const,
-      label: 'Dataset 2',
-      backgroundColor: colorGreen,
-      data: Array.from({ length: 7 }, () =>
-        faker.datatype.number({ min: -10, max: 10 })
-      ),
-      borderColor: 'white',
-      borderWidth: 2,
-    },
-    {
-      type: 'bar' as const,
-      label: 'Dataset 3',
-      backgroundColor: colorBlue,
-      data: Array.from({ length: 7 }, () =>
-        faker.datatype.number({ min: -10, max: 10 })
-      ),
-    },
-  ],
-};
+import { colorRed } from './data';
 
 export const dynamicOptions = {
   scales: {
@@ -73,42 +39,6 @@ export const getDynamicData = () => ({
   ],
 });
 
-export const eventsOptions = {
-  scales: {
-    y: {
-      beginAtZero: true,
-    },
-  },
-};
-
-export const eventsData = {
-  labels: months,
-  datasets: [
-    {
-      type: 'line',
-      label: 'Dataset 1',
-      borderColor: colorRed,
-      borderWidth: 2,
-      fill: false,
-      data: numbers(),
-    },
-    {
-      type: 'bar',
-      label: 'Dataset 2',
-      backgroundColor: colorGreen,
-      data: numbers(),
-      borderColor: 'white',
-      borderWidth: 2,
-    },
-    {
-      type: 'bar',
-      label: 'Dataset 3',
-      backgroundColor: colorBlue,
-      data: numbers(),
-    },
-  ],
-};
-
 export const sameData1 = {
   labels: [
     'Jan',
diff --git a/stories/Chart.tsx b/stories/Chart.tsx
index 11e8172fe..54616aed0 100644
--- a/stories/Chart.tsx
+++ b/stories/Chart.tsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect, useReducer } from 'react';
 import { InteractionItem } from 'chart.js';
 import 'chartjs-adapter-date-fns';
 import Chart from '../src';
+import * as multitypeChart from '../sandboxes/chart/multitype/App';
+import * as eventsChart from '../sandboxes/chart/events/App';
 import * as data from './Chart.data';
 
 export default {
@@ -19,7 +21,7 @@ export default {
 export const MultiType = args => <Chart {...args} />;
 
 MultiType.args = {
-  data: data.multiTypeData,
+  data: multitypeChart.data,
 };
 
 export const Dynamic = args => {
@@ -85,8 +87,8 @@ export const ClickEvents = ({
 };
 
 ClickEvents.args = {
-  options: data.eventsOptions,
-  data: data.eventsData,
+  options: eventsChart.options,
+  data: eventsChart.data,
 };
 
 ClickEvents.argTypes = {
@@ -98,7 +100,7 @@ ClickEvents.argTypes = {
 export const Redraw = args => <Chart {...args} />;
 
 Redraw.args = {
-  data: data.multiTypeData,
+  data: multitypeChart.data,
   redraw: true,
 };
 
diff --git a/stories/Doughnut.tsx b/stories/Doughnut.tsx
index 23f26ad34..85dabee89 100644
--- a/stories/Doughnut.tsx
+++ b/stories/Doughnut.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Doughnut } from '../src';
-import { data } from './Doughnut.data';
+import { data } from '../sandboxes/doughnut/default/App';
 
 export default {
   title: 'Components/Doughnut',
diff --git a/stories/Line.data.ts b/stories/Line.data.ts
deleted file mode 100644
index 74ad87bb3..000000000
--- a/stories/Line.data.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import {
-  months,
-  colorRed,
-  colorRed05,
-  colorBlue,
-  colorBlue05,
-  numbers,
-} from './data';
-
-export const options = {
-  responsive: true,
-  plugins: {
-    legend: {
-      position: 'top',
-    },
-    title: {
-      display: true,
-      text: 'Chart.js Line Chart',
-    },
-  },
-};
-
-export const data = {
-  labels: months,
-  datasets: [
-    {
-      label: 'Dataset 1',
-      data: numbers(),
-      borderColor: colorRed,
-      backgroundColor: colorRed05,
-    },
-    {
-      label: 'Dataset 2',
-      data: numbers(),
-      borderColor: colorBlue,
-      backgroundColor: colorBlue05,
-    },
-  ],
-};
-
-export const multiAxisOptions = {
-  responsive: true,
-  interaction: {
-    mode: 'index',
-    intersect: false,
-  },
-  stacked: false,
-  plugins: {
-    title: {
-      display: true,
-      text: 'Chart.js Line Chart - Multi Axis',
-    },
-  },
-  scales: {
-    y: {
-      type: 'linear',
-      display: true,
-      position: 'left',
-    },
-    y1: {
-      type: 'linear',
-      display: true,
-      position: 'right',
-
-      // grid line settings
-      grid: {
-        drawOnChartArea: false, // only want the grid lines for one axis to show up
-      },
-    },
-  },
-};
-
-export const multiAxisData = {
-  labels: months,
-  datasets: [
-    {
-      label: 'Dataset 1',
-      data: numbers(),
-      borderColor: colorRed,
-      backgroundColor: colorRed05,
-      yAxisID: 'y',
-    },
-    {
-      label: 'Dataset 2',
-      data: numbers(),
-      borderColor: colorBlue,
-      backgroundColor: colorBlue05,
-      yAxisID: 'y1',
-    },
-  ],
-};
diff --git a/stories/Line.tsx b/stories/Line.tsx
index 051493cba..083952f75 100644
--- a/stories/Line.tsx
+++ b/stories/Line.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Line } from '../src';
-import * as data from './Line.data';
+import * as defaultLine from '../sandboxes/line/default/App';
+import * as multiaxisLine from '../sandboxes/line/multiaxis/App';
 
 export default {
   title: 'Components/Line',
@@ -17,13 +18,13 @@ export default {
 export const Default = args => <Line {...args} />;
 
 Default.args = {
-  data: data.data,
-  options: data.options,
+  data: defaultLine.data,
+  options: defaultLine.options,
 };
 
 export const MultiAxis = args => <Line {...args} />;
 
 MultiAxis.args = {
-  data: data.multiAxisData,
-  options: data.multiAxisOptions,
+  data: multiaxisLine.data,
+  options: multiaxisLine.options,
 };
diff --git a/stories/Pie.tsx b/stories/Pie.tsx
index 48de514cc..63f8a35ee 100644
--- a/stories/Pie.tsx
+++ b/stories/Pie.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
+import faker from 'faker';
 import { Pie } from '../src';
-import { data, randomDataset } from './Pie.data';
+import { data } from '../sandboxes/pie/default/App';
 
 export default {
   title: 'Components/Pie',
@@ -20,6 +21,13 @@ Default.args = {
   data,
 };
 
+function randomDataset() {
+  return {
+    value: faker.datatype.number({ min: -100, max: 100 }),
+    color: faker.internet.color(),
+  };
+}
+
 export const Dynamic = args => {
   const [datasets, setDatasets] = useState(() => [randomDataset()]);
   const onAdd = () => {
diff --git a/stories/PolarArea.tsx b/stories/PolarArea.tsx
index 27ff90549..777260a64 100644
--- a/stories/PolarArea.tsx
+++ b/stories/PolarArea.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PolarArea } from '../src';
-import { data } from './PolarArea.data';
+import { data } from '../sandboxes/polarArea/default/App';
 
 export default {
   title: 'Components/PolarArea',
diff --git a/stories/Radar.tsx b/stories/Radar.tsx
index f645fcf42..a0b96d14e 100644
--- a/stories/Radar.tsx
+++ b/stories/Radar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Radar } from '../src';
-import { data, options } from './Radar.data';
+import { data } from '../sandboxes/radar/default/App';
 
 export default {
   title: 'Components/Radar',
@@ -18,5 +18,4 @@ export const Default = args => <Radar {...args} />;
 
 Default.args = {
   data,
-  options,
 };
diff --git a/stories/Scatter.data.ts b/stories/Scatter.data.ts
deleted file mode 100644
index 9f0919d6a..000000000
--- a/stories/Scatter.data.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import faker from 'faker';
-
-function pos() {
-  return {
-    x: faker.datatype.number({ min: -10, max: 10 }),
-    y: faker.datatype.number({ min: -10, max: 10 }),
-  };
-}
-
-export const options = {
-  scales: {
-    y: {
-      beginAtZero: true,
-    },
-  },
-};
-
-export const data = {
-  datasets: [
-    {
-      label: 'A dataset',
-      data: Array.from({ length: 15 }, pos),
-      backgroundColor: 'rgba(255, 99, 132, 1)',
-    },
-  ],
-};
diff --git a/stories/Scatter.tsx b/stories/Scatter.tsx
index 8bfd2cda8..c89b828ff 100644
--- a/stories/Scatter.tsx
+++ b/stories/Scatter.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Scatter } from '../src';
-import { data, options } from './Scatter.data';
+import { data, options } from '../sandboxes/scatter/default/App';
 
 export default {
   title: 'Components/Scatter',
diff --git a/test/chart.test-d.tsx b/test/chart.test-d.tsx
index adff209bc..1b9f6da12 100644
--- a/test/chart.test-d.tsx
+++ b/test/chart.test-d.tsx
@@ -2,7 +2,7 @@ import { expectError } from 'tsd';
 import React from 'react';
 import { Plugin } from 'chart.js';
 import Chart, { Scatter, Doughnut } from '../src';
-import { multiTypeData } from '../stories/Chart.data';
+import { data as multiTypeData } from '../sandboxes/chart/multitype/App';
 
 const data = {
   datasets: [],
diff --git a/yarn.lock b/yarn.lock
index d4af2ea48..ee8c721de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3051,6 +3051,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^17.0.10":
+  version "17.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.10.tgz#d6972ec018d23cf22b99597f1289343d99ea9d9d"
+  integrity sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-syntax-highlighter@11.0.5":
   version "11.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087"
