Version

5.3.2

Link to Minimal Reproduction

https://jsfiddle.net/rt7xpbzj/

Steps to Reproduce

1. Create a chart using any options.
2. Call setOption and pass new options which include a transition period.
3. Before the transition completes, call resize against the chart.

Current Behavior

The transition stops in its tracks, leaving items misshapen.

Here's a screenshot of the finished state from my jsfiddle:

Expected Behavior

• Ideally,* I'd like to be able to see these operations animate together. But anything where the chart isn't left in a corrupt state would work!

Environment

- Browser: Edge 101.0.1210.32

Any additional comments?

I'm working in a project where a particular chart needs to be able to transition between horizontal bar and pie types. And during that transition, the size of the element also needs to change: the horizontal bar chart should only be as tall as it needs to be to comfortably fit fixed-width bars, and the pie chart should have a constant size.

Because I happen to be using Angular for the project, I don't have good control over the order in which changes get detected. I'm resizing the chart element dynamically based on the type of chart being shown, and effectively responding to those changes in size using a ResizeObserver that calls chart.resize() (I'm using auto sizing, despite my attached repro passing values in), but as I was working to introduce animated transitions, I found charts were left incomplete.

So far, I've come up with a somewhat-viable workaround that listens any time the container element resizes, and only calls chart.resize()after the finished event has been triggered. I think it's okay--it seems to work--but it feels pretty hacky, and it looks much choppier than if the transitions could occur simultaneously.