docs(examples): bubble chart example (#833)

Author: dangreen

sandboxes/bubble/default/App.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Bubble } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  scales: {
+    y: {
+      beginAtZero: true,
+    },
+  },
+};
+
+export const data = {
+  datasets: [
+    {
+      label: 'Red dataset',
+      data: Array.from({ length: 50 }, () => ({
+        x: faker.datatype.number({ min: -100, max: 100 }),
+        y: faker.datatype.number({ min: -100, max: 100 }),
+        r: faker.datatype.number({ min: 5, max: 20 }),
+      })),
+      backgroundColor: 'rgba(255, 99, 132, 0.5)',
+    },
+    {
+      label: 'Blue dataset',
+      data: Array.from({ length: 50 }, () => ({
+        x: faker.datatype.number({ min: -100, max: 100 }),
+        y: faker.datatype.number({ min: -100, max: 100 }),
+        r: faker.datatype.number({ min: 5, max: 20 }),
+      })),
+      backgroundColor: 'rgba(53, 162, 235, 0.5)',
+    },
+  ],
+};
+
+export function App() {
+  return <Bubble options={options} data={data} />;
+}

sandboxes/bubble/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);

sandboxes/bubble/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"
+  }
+}

stories/Bubble.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Bubble } from '../src';
+import { data, options } from '../sandboxes/bubble/default/App';
+
+export default {
+  title: 'Components/Bubble',
+  component: Bubble,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    width: 500,
+    height: 400,
+  },
+};
+
+export const Default = args => <Bubble {...args} />;
+
+Default.args = {
+  data,
+  options,
+};