charts changes

src/components/Doughnut/LineChart.jsx

@@ -1,94 +1,73 @@
-// LineChart.jsx
-import React from "react";
-import { Line } from "react-chartjs-2";
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  PointElement,
-  LinearScale,
-  CategoryScale,
-} from "chart.js";
+// LineChart.js
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
 
-// Register the necessary components
-ChartJS.register(
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  PointElement,
-  LinearScale,
-  CategoryScale
-);
+// Register the components of Chart.js you need
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
 
-// Sample options for the chart
-// Sample options for the chart
-const options = {
-  responsive: true,
-  plugins: {
-    legend: {
-      position: "top",
-    },
-    tooltip: {
-      callbacks: {
-        label: function (context) {
-          let label = context.dataset.label || "";
-          if (label) {
-            label += ": ";
-          }
-          if (context.parsed.y !== null) {
-            label += `${context.parsed.y}`;
-          }
-          return label;
+const LineChart = () => {
+    const data = {
+        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        datasets: [
+            {
+                label: 'Transaction Data',
+                data: [1000, 3000, 2000, 3500, 4000, 3000, 5000, 6000, 5000, 4500, 4800, 5200],
+                borderColor: '#978FED',
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                fill: true,
+                // tension: 0.4,
+                pointRadius: 4,
+                pointBackgroundColor: 'white',
+                pointBorderColor: 'blue',
+                pointHoverRadius: 7,
+                pointHoverBackgroundColor: '#978FED',
+            },
+        ],
+    };
+
+    const options = {
+        responsive: true,
+        plugins: {
+            tooltip: {
+                callbacks: {
+                  enabled: true, // Enable/disable tooltip
+                mode: 'index', // Display all items at the same index (can use 'nearest' or other modes)
+                intersect: false, 
+                    label: function (tooltipItem) {
+                        return `Price: $${tooltipItem.raw}`;
+                    },
+                    afterLabel: function (tooltipItem) {
+                        return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`;
+                    },
+                },
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                titleColor: '#fff',
+                bodyColor: '#fff',
+                displayColors: false,
+            },
         },
-      },
-    },
-  },
-  animation: {
-    tension: {
-      duration: 2000,
-      easing: "linear",
-      from: 1,
-      to: 0,
-      loop: false,
-    },
-  },
-};
+        scales: {
+            y: {
+                beginAtZero: true,
+                title: {
+                    display: true,
+                    text: 'Transactions (k)',
+                },
+                ticks: {
+                    callback: function (value) {
+                        return value / 1000 + 'k';
+                    },
+                },
+            },
+        },
+    };
 
-const Utils = {
-  numbers: ({ count, min, max }) =>
-    Array.from(
-      { length: count },
-      () => Math.floor(Math.random() * (max - min + 1)) + min
-    ),
-  CHART_COLORS: {
-    darkGreen: "#978FED ",
-  },
-  transparentize: (color, opacity) => {
-    return color.replace(/(rgba\(\d+, \d+, \d+, )\d+(\))/, `$1${opacity}$2`);
-  },
-};
-
-const LineChart = ({ width = 300, height = 250 }) => {
-  const data = {
-    labels: ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC",],
-    datasets: [
-      {
-        label: "Exchange rate",
-        data: [0, 3, 2, 4, 6, 2, 4, 4, 5, 4, 4, 5],
-        borderColor: Utils.CHART_COLORS.darkGreen,
-        backgroundColor: Utils.transparentize(
-          Utils.CHART_COLORS.darkGreen,0.5
-        ),
-        pointStyle: "rectRounded",
-        pointRadius: 1,
-        pointHoverRadius: 5,
-      },
-    ],
-  };
-  return <Line data={data} options={options} />;
+    return (
+        <div>
+            <Line data={data} options={options} />
+        </div>
+    );
 };
 
 export default LineChart;