React Chart crashes when dynamically adding Series

[Ross]

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

[Ross]

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