Merge dev.

src/components/charts/Chart.tsx

@@ -81,7 +81,7 @@ export function Chart({
             dataset.data = data?.datasets[index]?.data;
 
             if (chart.current.legend.legendItems[index]) {
-              chart.current.legend.legendItems[index].text = data?.datasets[index]?.label;
+              chart.current.legend.legendItems[index].text = data.datasets[index]?.label;
             }
           }
         });
@@ -90,6 +90,12 @@ export function Chart({
       }
     }
 
+    if (data.focusLabel !== null) {
+      chart.current.data.datasets.forEach(ds => {
+        ds.hidden = data.focusLabel ? ds.label !== data.focusLabel : false;
+      });
+    }
+
     chart.current.options = options;
 
     // Allow config changes before update
@@ -100,16 +106,6 @@ export function Chart({
     setLegendItems(chart.current.legend.legendItems);
   };
 
-  useEffect(() => {
-    if (data) {
-      if (!chart.current) {
-        createChart(data);
-      } else {
-        updateChart(data);
-      }
-    }
-  }, [data, options]);
-
   const handleLegendClick = (item: LegendItem) => {
     if (type === 'bar') {
       const { datasetIndex } = item;
@@ -131,6 +127,16 @@ export function Chart({
     setLegendItems(chart.current.legend.legendItems);
   };
 
+  useEffect(() => {
+    if (data) {
+      if (!chart.current) {
+        createChart(data);
+      } else {
+        updateChart(data);
+      }
+    }
+  }, [data, options]);
+
   return (
     <>
       <div {...props}>