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,7 +26,8 @@ export function BarChart(props: BarChartProps) {
     stacked = false,
   } = props;
 
-  const options = {
+  const options = useMemo(() => {
+    return {
       scales: {
         x: {
           type: XAxisType,
@@ -64,6 +66,7 @@ export function BarChart(props: BarChartProps) {
         },
       },
     };
+  }, [colors]);
 
   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,7 +38,8 @@ export function Chart({
   const chart = useRef(null);
   const [legendItems, setLegendItems] = useState([]);
 
-  const options = {
+  const options = useMemo(() => {
+    return {
       responsive: true,
       maintainAspectRatio: false,
       animation: {
@@ -61,6 +62,7 @@ export function Chart({
       },
       ...chartOptions,
     };
+  }, [chartOptions]);
 
   const createChart = (data: any) => {
     ChartJS.defaults.font.family = 'Inter';