From 18e45e70dfb37ce4cc775411fc2a71eb01b50b66 Mon Sep 17 00:00:00 2001
From: edvinstava <edvin@devotta.no>
Date: Thu, 22 Feb 2024 14:00:07 +0100
Subject: [PATCH] feat: improved afterDraw function

---
 .../GrowthChartBuilder/GrowthChartBuilder.tsx | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx b/src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx
index d73028f..a0054d0 100644
--- 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} />;