add chart line shadow

src/kitUI/Chart/config.ts

@@ -154,7 +154,7 @@ export const chartjsOptions: ChartOptions<"line"> = {
     },
 };
 
-export const legendBottomPaddingPlugin = {
+const legendBottomPaddingPlugin = {
     id: "increase-legend-spacing",
     beforeInit(chart: any) {
         const originalFit = chart.legend.fit;
@@ -165,8 +165,8 @@ export const legendBottomPaddingPlugin = {
     }
 };
 
-export const verticalLineOnHoverPlugin = {
+const verticalLineOnHoverPlugin = {
-    id: "vertical_line_on_hover",
+    id: "vertical-line-on-hover",
     afterDraw: (chart: any) => {
         if (!chart?.tooltip?._active?.length) return;
 
@@ -190,6 +190,21 @@ export const verticalLineOnHoverPlugin = {
     }
 };
 
+const lineShadowPlugin = {
+    id: "line-shadow",
+    beforeDatasetDraw(chart: Chart, { index }: { index: number; }) {
+        const ctx = chart.ctx;
+        ctx.save();
+        ctx.shadowColor = `${chart.data.datasets[index].borderColor}D0`;
+        ctx.shadowBlur = 15;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 5;
+    },
+    afterDatasetDraw(chart: Chart) {
+        chart.ctx.restore();
+    }
+};
+
 Chart.register(
     CategoryScale,
     LinearScale,
@@ -202,4 +217,5 @@ Chart.register(
     zoomPlugin,
     legendBottomPaddingPlugin,
     verticalLineOnHoverPlugin,
+    lineShadowPlugin,
 );