docs: created area chart example (#1050)

Author: surjithctly

sandboxes/line/area/App.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Filler,
+  Legend,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import faker from 'faker';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Filler,
+  Legend
+);
+
+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: [
+    {
+      fill: true,
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
+      borderColor: 'rgb(53, 162, 235)',
+      backgroundColor: 'rgba(53, 162, 235, 0.5)',
+    },
+  ],
+};
+
+export function App() {
+  return <Line options={options} data={data} />;
+}

sandboxes/line/area/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+createRoot(rootElement).render(<App />);

sandboxes/line/area/package.json

@@ -0,0 +1,17 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "18.0.0",
+    "react-chartjs-2": "^4.0.0",
+    "react-dom": "18.0.0",
+    "react-scripts": "5.0.0"
+  },
+  "devDependencies": {
+    "@types/faker": "5.5.3",
+    "@types/react": "18.0.0",
+    "@types/react-dom": "18.0.0",
+    "typescript": "4.5.4"
+  }
+}

website/docs/examples/area-chart.mdx

@@ -0,0 +1,27 @@
+---
+description: Example of area chart in react-chartjs-2.
+tags:
+  - Area Chart
+---
+
+import ContextProvider from '../../src/components/ContextProvider';
+
+# Area Chart
+
+<ContextProvider>
+  {({ branch, theme }) => (
+    <iframe
+      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/line/area?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+      style={{
+        width: '100%',
+        height: '500px',
+        border: 0,
+        borderRadius: '4px',
+        overflow: 'hidden',
+      }}
+      title='reactchartjs/react-chartjs-2 usage example'
+      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
+      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
+    ></iframe>
+  )}
+</ContextProvider>

website/docs/examples/docs.js

@@ -3,6 +3,7 @@ exports.docs = [
   { title: 'Horizontal Bar Chart', slug: '/examples/horizontal-bar-chart' },
   { title: 'Stacked Bar Chart', slug: '/examples/stacked-bar-chart' },
   { title: 'Grouped Bar Chart', slug: '/examples/grouped-bar-chart' },
+  { title: 'Area Chart', slug: '/examples/area-chart' },
   { title: 'Line Chart', slug: '/examples/line-chart' },
   { title: 'Multiaxis Line Chart', slug: '/examples/multiaxis-line-chart' },
   { title: 'Pie Chart', slug: '/examples/pie-chart' },