Zoom on one chart is affecting all charts

[Nath5]

I have a page with several ChartJS scatter charts. When I scroll on one chart and then move to another when I scroll the second chart it jumps to the zoom level of the first chart. Seems like some state is being shared between them but I am not sure where.

I am using the following imports

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.0/dist/chartjs-plugin-zoom.min.js"></script>

I do share a config object across the various charts so I am not sure if the zoom state is being persisted in the config object. Below is a snippet showing my configuration and instantiation of one of the charts.

Please let me know if using a shared config breaks how the zoom stores data or if there is a possible workaround.

const config = {
                type: 'scatter',
                options: {
                    responsive: true,
                    aspectRatio: 1,
                    maintainAspectRatio: false,
                    hoverMode: 'nearest',
                    intersect: true,
                    tooltips: {
                        enabled: false
                    },
                    scales: {
                        x: {
                            ticks: {
                                display: false
                            }
                        },
                        y: {
                            ticks: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        htmlLegend: {
                            // ID of the container to put the legend in
                            containerID: '',
                        },
                        legend: {
                            display: false,
                        },
                        quadrants: {
                            topLeft: color(CHART_COLORS.blue).alpha(.3).rgbString(),
                            topRight: color(CHART_COLORS.green).alpha(.3).rgbString(),
                            bottomRight: color(CHART_COLORS.yellow).alpha(.3).rgbString(),
                            bottomLeft: color(CHART_COLORS.red).alpha(.3).rgbString(),
                        },
                        datalabels: {
                            color: '#FFFFFF',
                            formatter: function (value, context) {
                                return (context.dataIndex == 0) ? context.chart.data.datasets[context.datasetIndex].shortLabel : '';
                            },
                            borderRadius: 4,
                            font: {
                              family: 'sans serif',
                              size: '14',
                              weight: 'bold'
                            },
                            align: 'start',
                            anchor: 'start'
                        },
                        zoom: {
                            pan: {
                                enabled: true,
                                mode: 'xy',
                                threshold: 10,
                            },
                            zoom: {
                                wheel: {
                                    enabled: true,
                                },
                                pinch: {
                                    enabled: true
                                },
                                mode: 'xy',
                           }
                        },
                    }
                },
                plugins: [quadrants, ChartDataLabels, ChartZoom, htmlLegendPlugin]
            };

    const sectorETFs_config = Object.assign({}, config);
    sectorETFs_config.options.plugins.htmlLegend.containerID = 'sectorETFs_legend'
    sectorETFs_config.data = {
         datasets:[{
              label: 'XLB - Materials Select Sector SPDR Fund',
              shortLabel: 'XLB',
              pointRadius: 4,
              borderColor: colors[0],
              showLine: true,
               data: [{x: -0.519999999999996, y: -0.20999999999999375},{x: -0.6099999999999994, y: -0.20999999999999375},{x: 
              -0.5900000000000034, y: -0.12999999999999545},{x: -0.45000000000000284, y: 0.04000000000000625},{x: 
              -0.39000000000000057, y: 0.09000000000000341},{x: -0.2600000000000051, y: 0.20999999999999375}]
               }
     ]
}
const sectorETFs  = document.getElementById('sectorETFs').getContext('2d');
new Chart(sectorETFs , sectorETFs_config);

[kurkle]

It updates the options.scales

[Nath5]

Ok, that makes sense. Is the best way around that to create completely separate config objects for each chart?

[kurkle]

Yes, Object.assing is a shallow copy, so the scales are queal. But you ciykd just place your current config into an function and return that. That way you get a new copy for every call.

function createConfig() {
return { ... };
}

const sectorEFTs_config = createConfig();
...