zoom and annotation don't work together

[vtarelkin]

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]

My only guess is that you are deleting and recreating the chart somehow instead of updating. Because when I update the chart by adding a new annotation it works fine: https://jsfiddle.net/14bcqjxo/1/

[vtarelkin]

@LeeLenaleee Thank you for your response!

I looked at your example and didn't see where do you add annotation AFTER you've zoomed? I mean where is the button that allow us to add annotation? The issue is that zoom is RESETTED after annotation is added Zoom ratio isn't keeped

[LeeLenaleee]

The button is under the canvas Code for the button logic is on line 45-65

[vtarelkin]

@LeeLenaleee is seems issue is in react, I'll provide a link...

[vtarelkin]

@LeeLenaleee ok, finally got some code) Please, try it. Zoom to some place and then press the button. You'll see how zoom is lost... https://stackblitz.com/edit/react-ts-7fmejn?file=Chart.js

[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?

[vtarelkin]

@LeeLenaleee what a beautiful workaround you've provided)

[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

[LeeLenaleee]

@kurkle you added the original repro link instead of your updated one

[kurkle]

@kurkle you added the original repro link instead of your updated one

ok, I guess I did not save my changes then, duh.

[stockiNail]

Maybe I'm wrong but this should be solved in https://github.com/reactchartjs/react-chartjs-2/releases/tag/v4.3.1