Fixed chart rendering issue.

src/components/charts/BarChart.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useTheme } from 'components/hooks';
 import Chart, { ChartProps } from 'components/charts/Chart';
 import { renderNumberLabels } from 'lib/charts';
@@ -25,45 +26,47 @@ export function BarChart(props: BarChartProps) {
     stacked = false,
   } = props;
 
-  const options = {
+  const options = useMemo(() => {
-    scales: {
+    return {
-      x: {
+      scales: {
-        type: XAxisType,
+        x: {
-        stacked: true,
+          type: XAxisType,
-        time: {
+          stacked: true,
-          unit,
+          time: {
+            unit,
+          },
+          grid: {
+            display: false,
+          },
+          border: {
+            color: colors.chart.line,
+          },
+          ticks: {
+            color: colors.chart.text,
+            autoSkip: false,
+            maxRotation: 0,
+            callback: renderXLabel,
+          },
         },
-        grid: {
+        y: {
-          display: false,
+          type: YAxisType,
-        },
+          min: 0,
-        border: {
+          beginAtZero: true,
-          color: colors.chart.line,
+          stacked,
-        },
+          grid: {
-        ticks: {
+            color: colors.chart.line,
-          color: colors.chart.text,
+          },
-          autoSkip: false,
+          border: {
-          maxRotation: 0,
+            color: colors.chart.line,
-          callback: renderXLabel,
+          },
+          ticks: {
+            color: colors.chart.text,
+            callback: renderYLabel || renderNumberLabels,
+          },
         },
       },
-      y: {
+    };
-        type: YAxisType,
+  }, [colors]);
-        min: 0,
-        beginAtZero: true,
-        stacked,
-        grid: {
-          color: colors.chart.line,
-        },
-        border: {
-          color: colors.chart.line,
-        },
-        ticks: {
-          color: colors.chart.text,
-          callback: renderYLabel || renderNumberLabels,
-        },
-      },
-    },
-  };
 
   const handleTooltip = ({ tooltip }: { tooltip: any }) => {
     const { opacity } = tooltip;

src/components/charts/Chart.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, ReactNode } from 'react';
+import { useState, useRef, useEffect, useMemo, ReactNode } from 'react';
 import { Loading } from 'react-basics';
 import classNames from 'classnames';
 import ChartJS, { LegendItem } from 'chart.js/auto';
@@ -38,29 +38,31 @@ export function Chart({
   const chart = useRef(null);
   const [legendItems, setLegendItems] = useState([]);
 
-  const options = {
+  const options = useMemo(() => {
-    responsive: true,
+    return {
-    maintainAspectRatio: false,
+      responsive: true,
-    animation: {
+      maintainAspectRatio: false,
-      duration: animationDuration,
+      animation: {
-      resize: {
+        duration: animationDuration,
-        duration: 0,
+        resize: {
+          duration: 0,
+        },
+        active: {
+          duration: 0,
+        },
       },
-      active: {
+      plugins: {
-        duration: 0,
+        legend: {
+          display: false,
+        },
+        tooltip: {
+          enabled: false,
+          external: onTooltip,
+        },
       },
-    },
+      ...chartOptions,
-    plugins: {
+    };
-      legend: {
+  }, [chartOptions]);
-        display: false,
-      },
-      tooltip: {
-        enabled: false,
-        external: onTooltip,
-      },
-    },
-    ...chartOptions,
-  };
 
   const createChart = (data: any) => {
     ChartJS.defaults.font.family = 'Inter';