Chart X axis jumps while animating if additionalOptions is defined

[Legioth]

trafficstars

Description

The X axis labels jump while a value update is animated if additionalOptions is defined, even if the options object is empty. The labels stay in their place during animation if there is no additionalOptions.

https://github.com/user-attachments/assets/cd785eda-6f35-481b-99ef-6e424ad4a179

I've increased the Charts font size to 18px in the video to make the effect easier to see but the jumping also happens with default styles.

Expected outcome

No jumping labels

Minimal reproducible example

import { useSignal } from "@vaadin/hilla-react-signals";
import { Button } from "@vaadin/react-components";
import { Chart, ChartSeries } from "@vaadin/react-components-pro";

export default function Test() {
    const value = useSignal(3);

    return <>
        <Button onClick={() => value.value++}>Update value</Button>
        <Chart categories={["A", "B"]} additionalOptions={{}}>
            <ChartSeries values={[0, value.value]} />
        </Chart>
    </>
}

Steps to reproduce

1. Click the button and notice how the x axis labels jump while animating
2. Change the code to remove the empty additionalOptions object
3. Click the button and notice that the labels no longer jump around

Environment

Vaadin 24.5.0.alpha13

Browsers

No response

[Legioth]

Seems to be related to the redraw flag. If I instead apply my options through configuration (through a ref since I'm using React), then I see similar behavior if I I do update(myOptions, true) but no jumping with update(myOptions, false).

This otherwise seems to work but has the drawback that the original configuration is seen for a fraction of a second when the chart is initially rendered before the ref callback has been run.