Fixed chart rendering issue.

This commit is contained in:
Mike Cao 2024-03-29 08:39:05 -07:00
parent e1ad3b99cd
commit 40c1ce40e2
2 changed files with 63 additions and 58 deletions

View file

@ -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 = {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: animationDuration,
resize: {
duration: 0,
const options = useMemo(() => {
return {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: animationDuration,
resize: {
duration: 0,
},
active: {
duration: 0,
},
},
active: {
duration: 0,
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: onTooltip,
},
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: onTooltip,
},
},
...chartOptions,
};
...chartOptions,
};
}, [chartOptions]);
const createChart = (data: any) => {
ChartJS.defaults.font.family = 'Inter';