Fixed chart rendering issue.
This commit is contained in:
parent
e1ad3b99cd
commit
40c1ce40e2
|
@ -1,3 +1,4 @@
|
||||||
|
import { useMemo } from 'react';
|
||||||
import { useTheme } from 'components/hooks';
|
import { useTheme } from 'components/hooks';
|
||||||
import Chart, { ChartProps } from 'components/charts/Chart';
|
import Chart, { ChartProps } from 'components/charts/Chart';
|
||||||
import { renderNumberLabels } from 'lib/charts';
|
import { renderNumberLabels } from 'lib/charts';
|
||||||
|
@ -25,7 +26,8 @@ export function BarChart(props: BarChartProps) {
|
||||||
stacked = false,
|
stacked = false,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const options = {
|
const options = useMemo(() => {
|
||||||
|
return {
|
||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
type: XAxisType,
|
type: XAxisType,
|
||||||
|
@ -64,6 +66,7 @@ export function BarChart(props: BarChartProps) {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
}, [colors]);
|
||||||
|
|
||||||
const handleTooltip = ({ tooltip }: { tooltip: any }) => {
|
const handleTooltip = ({ tooltip }: { tooltip: any }) => {
|
||||||
const { opacity } = tooltip;
|
const { opacity } = tooltip;
|
||||||
|
|
|
@ -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 { Loading } from 'react-basics';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import ChartJS, { LegendItem } from 'chart.js/auto';
|
import ChartJS, { LegendItem } from 'chart.js/auto';
|
||||||
|
@ -38,7 +38,8 @@ export function Chart({
|
||||||
const chart = useRef(null);
|
const chart = useRef(null);
|
||||||
const [legendItems, setLegendItems] = useState([]);
|
const [legendItems, setLegendItems] = useState([]);
|
||||||
|
|
||||||
const options = {
|
const options = useMemo(() => {
|
||||||
|
return {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
animation: {
|
animation: {
|
||||||
|
@ -61,6 +62,7 @@ export function Chart({
|
||||||
},
|
},
|
||||||
...chartOptions,
|
...chartOptions,
|
||||||
};
|
};
|
||||||
|
}, [chartOptions]);
|
||||||
|
|
||||||
const createChart = (data: any) => {
|
const createChart = (data: any) => {
|
||||||
ChartJS.defaults.font.family = 'Inter';
|
ChartJS.defaults.font.family = 'Inter';
|
||||||
|
|
Loading…
Reference in New Issue