Zoom speed on large data

[diamond95]

Hi.

I'm trying to make faster zooming when there is large data in chart.

My chart looks like this: https://imgur.com/a/9EvD3ua

So problem is when I'm trying to zoom in, I must scroll too much ( 10 seconds ) to zoom in to maximum.

I've used this props:
zoom: { enabled: true, drag: false, mode: "x", speed: 0.1, sensitivity: 0.01 },

Is there any option, solution for faster zooming ?
Thanks!

[ghost]

Hi,

had exactly the same issue. After some searches on GitHub and rest of the web, I can say that there is actually no solution for this. Best you can do is setting these options:
zoom: {
enabled: true,
mode: 'x',
speed: 1,
threshold: 0,
sensitivity: 0
}

cf: speed and sensitivity concerned.
That will allow you to faster zoom, but I know that it remains slow.
It seems that chartjs zoom will be releasing an update soon, we can hope that they will change this.

[datainvestor]

I faced similar problem. I think it was sort of resolved when I changed X-axis to be of type "time"

 xAxes: [
            {
              type: "time"
            }
          ],

And that made the zoom and panning quite smooth.

[DjovDev]

I faced similar problem. I think it was sort of resolved when I changed X-axis to be of type "time"

 xAxes: [
            {
              type: "time"
            }
          ],

And that made the zoom and panning quite smooth.

This does not resolve anything for me.

[diamond95]

I faced similar problem. I think it was sort of resolved when I changed X-axis to be of type "time"

 xAxes: [
            {
              type: "time"
            }
          ],

And that made the zoom and panning quite smooth.

Same, it's doing nothing 👎

[DjovDev]

I got it to work :)
You need to populate your labels (x axis) with Moment objects
Then I defined the xAxes like so:
xAxes: [{ type: "time", time: { format: 'HH:mm', unit: 'minute', displayFormats: { minute: 'HH:mm' } }

[michael-harley]

I got this to work after a lot of trial and error looking for answers.
In case anyone of you wondering how to make it work (Zoom faster with type time)

{
    scales: {
        xAxes: [
        {
            type: "time",
            time: { unit: "day", displayFormats: { day: "DD-MM-YYYY" } },
            // distribution: "series", // Careful with this, this creates another problem when you pan the chart. Issue: #361
        },
        ],
        yAxes: [
        {
            ticks: { beginAtZero: true },
        },
        ],
    },
    plugins: {
        zoom: {
        pan: {
            enabled: true,
            mode: "x",
            speed: 15,
            threshold: 5,
            onPan: (x) => console.log("Pan!", x),
            onPanComplete: (x) => console.log("Complete Pan!", x),
        },
        zoom: {
            enabled: true,
            // drag: {
            //   animationDuration: 1000,
            // },
            mode: "x",
            speed: 0.1,
            threshold: 2,
            sensitivity: 3,
            onZoom: (x) => console.log("Zoom!", x),
            onZoomComplete: (x) => console.log("Complete Zoom!", x),
        },
        },
    },
}

Related Issue:

1. Distribution series problem when Panning the chart. Prevent scale change on pan #361