Scatter Chart update animation causes browser to hang

[dannycsfu]

Do you want to request a feature or report a bug?

No

What is the current behavior?

For scatter chart, with isAnimationActive enabled by default, after updating dataKeys for XAxis, YAxis, and/or ZAxis multiple times, the browser hangs.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

Rendered scatter chart with the following code:

    public renderChart(): JSX.Element {
        const { data,
                legend,
                xLabel,
                yLabel,
                xDataKey,
                yDataKey,
                zDataKey,
             } = this.props;

        return (
            <ResponsiveContainer>
                <ScatterChart>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey={ xDataKey }>
                        <Label value={ xLabel }
                               position="insideBottomRight"
                               offset={ -5 } />
                    </XAxis>
                    <YAxis dataKey={ yDataKey }>
                        <Label value={ yLabel } position="left"
                        angle={ -90 } offset={ 0 } overflow="visible" />
                    </YAxis>
                    { zDataKey &&
                        <ZAxis dataKey={ zDataKey }>
                        </ZAxis>
                    }
                    <Tooltip cursor={{ strokeDasharray: "3 3" }} />
                    { legend && <Legend /> }
                    <Scatter
                        data={ data }
                        fill={colors[0]}>
                    </Scatter>
                        );
                    }) }
                </ScatterChart>
            </ResponsiveContainer>
        );
    }

    public render(): JSX.Element {
        const { title, classes } = this.props;
        return (
                <Grid container spacing={ 24 }>
                    <Grid item xs={ 12 }>
                        <Typography variant="h5" align="center">
                            { title }
                        </Typography>
                    </Grid>
                    <Grid item xs={ 12 }>
                        <div className={ classes.container }>
                        {this.renderChart()}
                        </div>
                    </Grid>
                </Grid>
        );
    }

• xDataKey, yDataKey, and zDataKey are passed from a parent component, in which they were stored in state and the state is updated in parent component
• After multiple xDataKey, yDataKey, and zDataKey updates, the browser the browser hangs
• data in this case only contains less than 10 records in the array.
• By setting isAnimationActive as false, the issue was no longer observed.

What is the expected behavior?

Browser should not hang when xDataKey, yDataKey, and zDataKey are updated in the scatter chart that has animation enabled.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

recahrt: 1.5.0
Chrome: 75.0.3770.100
OS: Windows 10
Storybook: 4.1.7 with knob addon (4.1.1)
typescript: 3.2.4

[mrg-ml]

I have seen the browser become unresponsive as well when a ScatterChart is displayed. I was able to break into the loop to get a call stack. It happens sporadically. It either shows up as soon as the chart is displayed or it doesn't show up at all until I leave and go back to that page later.
recharts 1.1.0
Chrome: 75.0.3770.142
OS: Windows 10
ScatterChart_freeze_stack_trace.txt

[pschlan]

Seeing this as well when I update a Scatter. Would appreciate a workaround / fix.

[mrg-ml]

Specifying isAnimationActive={false} on the Scatter component worked for me.

[xile611]

Sorry for not handling your issue in time, please try the latest version. If the problem persists, please open a new issue according to the issue guide.