Fixed chart legend not rendering.

src/components/metrics/BarChart.tsx

@@ -48,6 +48,7 @@ export function BarChart({
   const [tooltip, setTooltipPopup] = useState(null);
   const { locale } = useLocale();
   const { theme, colors } = useTheme();
+  const [legendItems, setLegendItems] = useState([]);
 
   const getOptions = useCallback(() => {
     return {
@@ -133,13 +134,15 @@ export function BarChart({
     });
 
     onCreate?.(chart.current);
+
+    setLegendItems(chart.current.legend.legendItems);
   };
 
   const updateChart = (datasets: any[]) => {
     setTooltipPopup(null);
 
     chart.current.data.datasets.forEach((dataset: { data: any }, index: string | number) => {
-      dataset.data = datasets[index].data;
+      dataset.data = datasets[index]?.data;
     });
 
     chart.current.options = getOptions();
@@ -148,6 +151,8 @@ export function BarChart({
     onUpdate?.(chart.current);
 
     chart.current.update(updateMode);
+
+    setLegendItems(chart.current.legend.legendItems);
   };
 
   useEffect(() => {
@@ -160,13 +165,21 @@ export function BarChart({
     }
   }, [datasets, unit, theme, animationDuration, locale]);
 
+  const handleLegendClick = (index: number) => {
+    const meta = chart.current.getDatasetMeta(index);
+
+    meta.hidden = meta.hidden === null ? !chart.current.data.datasets[index].hidden : null;
+
+    chart.current.update();
+  };
+
   return (
     <>
       <div className={classNames(styles.chart, className)}>
         {isLoading && <Loading position="page" icon="dots" />}
         <canvas ref={canvas} />
       </div>
-      <Legend chart={chart.current} />
+      <Legend items={legendItems} onClick={handleLegendClick} />
       {tooltip && (
         <HoverTooltip>
           <div className={styles.tooltip}>{tooltip}</div>

src/components/metrics/Legend.tsx

@@ -6,38 +6,34 @@ import { useLocale } from 'components/hooks';
 import { useForceUpdate } from 'components/hooks';
 import styles from './Legend.module.css';
 
-export function Legend({ chart }) {
+export function Legend({
+  items = [],
+  onClick,
+}: {
+  items: any[];
+  onClick: (index: number) => void;
+}) {
   const { locale } = useLocale();
   const forceUpdate = useForceUpdate();
 
-  const handleClick = (index: string | number) => {
-    const meta = chart.getDatasetMeta(index);
-
-    meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
-
-    chart.update();
-
-    forceUpdate();
-  };
-
   useEffect(() => {
     forceUpdate();
   }, [locale, forceUpdate]);
 
-  if (!chart?.legend?.legendItems.find(({ text }) => text)) {
+  if (!items.find(({ text }) => text)) {
     return null;
   }
 
   return (
     <div className={styles.legend}>
-      {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => {
+      {items.map(({ text, fillStyle, datasetIndex, hidden }) => {
         const color = colord(fillStyle);
 
         return (
           <div
             key={text}
             className={classNames(styles.label, { [styles.hidden]: hidden })}
-            onClick={() => handleClick(datasetIndex)}
+            onClick={() => onClick(datasetIndex)}
           >
             <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
               <span className={locale}>{text}</span>