Chartjs-plugin-zoom plugin does not change x axis labels

Question

I am working with the chart.js module in order to plot some data and am using the chartjs-plugin-zoom in order to enable zooming and panning however although the zooming works the labels on the x axis will not change for whatever reason. I have seen similar questions but they all dealt with time series data and therefore the advice was unhelpful.

Here is the plot zoomed out:

and here is it zoomed in:

The key thing to notice is how the labels on the y axis have changed but the x axis labels have not changed. Here is the relevant config variable of the chart:

const config3 = {
                        
                        type: 'line',
                        data: {
                            labels: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
                            datasets: [
                            
                            {
                                label: "",
                                backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16),
                                borderColor: '#0071BC',
                                data: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
                                fill: false,
                                borderWidth: 1,
                            },

                            ],
                        },
                        options: {
                            responsive: true,
                            title: {
                                display: true,
                                text: 'Peak: -1.2188'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false,
                            },
                            hover: {
                                mode: 'nearest',
                                intersect: true
                            },
                            scales: {
                                xAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Frequency (Hz)'
                                    },
                                    ticks:{
                                        autoSkip: true,
                                        maxTicksLimit: 20
                                    },
                                }],
                                yAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Amplitude'
                                    }
                                }],
           
                            },
                            plugins:{
                                zoom: {
                                    pan: {
                                        enabled: true,
                                        mode: 'xy',
                                        speed: 20,
                                        threshold: 10,
                                    },
                                    zoom: {
                                        enabled: true,
                                        drag: false,
                                        mode: "xy",
                                        speed: 0.1,
                                        // sensitivity: 0.1,
                                    }
                                }
                            },
                            elements: {
                                point:{
                                    radius: 0
                                }
                            }
                        }
                    };

If needed I can provide more code but I imagine the mistake is probably contained in the config. I tried changing zoom.mode to be 'x' but that did not work.

Answer 1

In case someone else comes along this I figured out a solution that is pretty unintuitive.

The first problem is the way that labels are dealt with in chart.js and because they are treated as categories not x data the way that I thought they were. Therfore first you must pass your data in as coordinates in this format: (as shown in this documentation: https://www.chartjs.org/docs/latest/charts/line.html)

data: [{
    x: 10,
    y: 20
}, {
    x: 15,
    y: 10
}]

And delete the labels variable.

However this will not work with line charts despite what the documentation says. To get around this you can set: type: 'scatter' and inside the dataset write showLine: true This will generate a line plot where the x labels are auto generated and zooming will work perfectly.

I also think there was a performance boost which is a nice bonus.