feat: improved afterDraw function

dev-otta · Feb 22, 2024 · 18e45e7 · 18e45e7
1 parent ac604e3
commit 18e45e7
Showing 1 changed file with 12 additions and 18 deletions.
diff --git a/src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx b/src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx
@@ -30,25 +30,19 @@ export const GrowthChartBuilder = ({
         layout: { padding: { right: 60 } },
     };
 
-    useEffect(() => {
-        Chart.register({
-            id: 'custom_draw',
-            afterDraw: (chart) => {
-                const { ctx } = chart;
-                ctx.save();
-                ctx.font = `${Chart.defaults.font.size}px ${Chart.defaults.font.family}`;
-                ctx.fillStyle = 'red';
-                ctx.textBaseline = 'bottom';
-                chart.data.datasets.forEach((dataset, index) => {
-                    const meta = chart.getDatasetMeta(index);
-                    const [lastElement] = meta.data.slice(-1);
-                    const { x, y } = lastElement.getProps(['x', 'y']);
-                    ctx.fillStyle = typeof dataset.borderColor === 'string' ? dataset.borderColor : 'black';
-                    ctx.fillText(dataset.label, x + 10, y);
-                });
-                ctx.restore();
-            },
+    const afterDraw = (chart: Chart<'line', number[], string>) => {
+        const { ctx } = chart;
+        chart.data.datasets.forEach((dataset, index) => {
+            const meta = chart.getDatasetMeta(index);
+            const [lastElement] = meta.data.slice(-1);
+            const { x, y } = lastElement.getProps(['x', 'y']);
+            ctx.fillStyle = typeof dataset.borderColor === 'string' ? dataset.borderColor : 'black';
+            ctx.fillText(dataset.label, x + 10, y);
         });
+    };
+
+    useEffect(() => {
+        Chart.register({ id: 'custom_draw', afterDraw });
     }, []);
 
     return <Line data={data} options={options} />;