zoom and annotation don't work together

Well, I’ll try to ask here, trying to use both plugins

    const options = useMemo(() => ({
        plugins: {
            zoom: zoomOptions,
            annotation: annotationOptions,
            legend: {
                display: false
            },
            tooltip: {
                enabled: false
            },
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: scales,
        elements: {
            point: {
                radius: 0,
                hoverRadius: 0,
                borderWidth: 0,
                backgroundColor: 'rgba(0,0,0,0)'
            }
        }
    }), [zoomOptions, annotationOptions, preparedSpectraData]);

But when I set custom zoom in my chart and change annotation options by, for ex. pressing the button that adds a line on my chart, then zoom is resetting because whole chart is updating. Maybe you have some thoughts on this how can I avoid this behavior?

[LeeLenaleee]

not totally sure where the issue lies, within the plugin or withing the wrapper.

It seems that it is not an issue with the annotation plugin, if you make a state for the labels array zoom and change the labels array to somthing else it also happens.

Although I am suspecting the issue to be in the wrapper since if you go into the chart object and add the annotion that way and update it, it works fine: https://stackblitz.com/edit/react-ts-7g5czk?file=Chart.js

@kurkle can you switch this issue over to the zoom repo?

[kurkle]

@kurkle can you switch this issue over to the zoom repo?

I’m not sure the issue is in the zoom plugin either. The chart is re-created due to state change, so the issue is actually the usage of state for the annotation options. I’m sure there are use cases where its better to re-create the chart when options change, but this is not one of those.

Similar to @LeeLenaleee workaround, but updating the original object (reference) instead. https://stackblitz.com/edit/react-ts-7fmejn