From 431b370707e5e12a30490b16efd892c5b7c00c03 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 13 Sep 2023 12:05:43 +0300
Subject: [PATCH] Create line chart using chart.js

---
 .../Dashboard/BalanceLineChart/LineChart.tsx  | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/pages/Dashboard/BalanceLineChart/LineChart.tsx

diff --git a/src/pages/Dashboard/BalanceLineChart/LineChart.tsx b/src/pages/Dashboard/BalanceLineChart/LineChart.tsx
new file mode 100644
index 00000000..1390ebc4
--- /dev/null
+++ b/src/pages/Dashboard/BalanceLineChart/LineChart.tsx
@@ -0,0 +1,108 @@
+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
+);
+const exampleData = [
+    {
+        id: 1,
+        year: 2016,
+        userGain: 80000,
+        userLost: 823
+    },
+    {
+        id: 2,
+        year: 2017,
+        userGain: 45677,
+        userLost: 345
+    },
+    {
+        id: 3,
+        year: 2018,
+        userGain: 78888,
+        userLost: 555
+    },
+    {
+        id: 4,
+        year: 2019,
+        userGain: 90000,
+        userLost: 4555
+    },
+    {
+        id: 5,
+        year: 2020,
+        userGain: 4300,
+        userLost: 234
+    }
+];
+const labelsEx = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+const data = {
+    labels: labelsEx,
+    datasets: [
+        {
+            label: 'Dataset',
+            data: exampleData,
+            borderColor: 'light-red',
+            backgroundColor: 'light-red',
+            fill: true,
+            start: true,
+            origin: true
+        }
+    ]
+};
+const config = {
+    type: 'line',
+    data: data,
+    options: {
+        plugins: {
+            filler: {
+                propagate: false,
+            },
+            title: {
+                display: true,
+                text: (ctx: any) => 'Fill: ' + ctx.chart.data.datasets[0].fill
+            }
+        },
+        interaction: {
+            intersect: false,
+        }
+    },
+};
+const options = {
+    responsive: true,
+    plugins: {
+        legend: {
+            position: 'top' as const,
+        },
+        title: {
+            display: true,
+            text: 'Chart.js Line Chart',
+        },
+    },
+};
+const LineChart = () => {
+
+    return <Line options={options} data={data} />;
+
+}
+export default LineChart;
\ No newline at end of file