React Chart crashes when dynamically adding Series
ranger-ross opened this issue · comments
Is there an existing issue for this?
- I have searched this repository's issues and believe that this is not a duplicate.
I'm using ...
React Chart
Current Behaviour
When creating a <Chart/>
in React chart, I have noticed that if I try to dynamically change which series are displayed, the chart will disappear and a large error trace will appear in the console.
It appears to only occur after the chart is created.
See full example in the steps to reproduce
Expected Behaviour
I believe the correct behavior for this operation is to have the chart render the new series without error.
Steps to Reproduce
import {BarSeries} from "@devexpress/dx-react-chart";
import {Chart} from "@devexpress/dx-react-chart-material-ui";
import * as React from "react";
import {useEffect, useState} from "react";
interface ExampleItem {
xAxis: number,
series1: number,
series2: number,
}
const chartData: ExampleItem[] = [
{
xAxis: 100,
series1: 10,
series2: 10,
}
];
export function ExampleComp() {
// Create a React state to keep track of which Series to show.
const [seriesToShow, setSeriesToShow] = useState([
"series1"
]);
// Wait 2 seconds, then update the seriesToShow to have 2 series instead of 1.
// In real world this could be something else like a button click, ect
useEffect(() => {
setTimeout(() => {
setSeriesToShow([
"series1",
"series2"
])
}, 2000)
}, [])
return (
<Chart data={chartData}>
{/* A simple loop to add all series in seriesToShow */}
{seriesToShow.map(series => (
<BarSeries
key={series}
argumentField="xAxis"
valueField={series}
/>
))}
</Chart>
);
}
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<ExampleComp />);
Environment
- devextreme-reactive: 3.0.5
- react: 18.2.0
- browser: Google Chrome (Version 105.0.5195.52 (Official Build) (arm64)), also happens in Firefox, and Safari.
- bootstrap: none
- react-bootstrap: none
- material-ui: 5.10.4
As a work around, I have discovered that you can use the built in React key
attribute to force the Chart element to be reloaded any time elements change.
const key = seriesToShow.reduce((a,c) => a + c, '');
<Chart key={key} data={chartData}>...</Chart>
This is a fine work around but comes with some drawbacks such as animations being reset everytime there is a change to the key