Zooming a category axis with the mouse wheel barely works

[yoelz55]

Hi there,

• What version of the plugin and chart.js?
  Chartjs: 2.9.3
  Zoom: 0.7.7

The zoom on the y-axis works perfectly.
The x-axis doesn't work at all when the mouse cursor while zooming is on the left side, and when the cursor is on the right side, it does the zoom but really really slow (even when changing the speed and sensitivity) .

I tried also the functionality of zoom by dragging, unfortunately, I got the same result, the x-axis didn't work but the y-axis worked fine.

Please check out this example:
https://codepen.io/yoelz55/pen/WNQLxRN

Thank you in advance for any help,
Yoel

Originally posted by @yoelz55 in #50 (comment)

[borjaseijo]

I have obtained the same issue but using date scale in the x-axis. I have used the following library versions:

• Chartjs: 2.9.3
• Hammer.JS: 2.0.7
• Zoom: 0.7.7

[DjovDev]

I resolved this with changing the type of X-axis to "time". In my case I had the "time" on the X-axis as well so it came out fine. Here is the piece of code defining my X-axes:

My X-data is populated with Moment (momentjs) objects.

xAxes: [{
type: "time",
time: {
format: 'HH:mm',
unit: 'minute'
}
}]

[silasrm]

Any solution? My data has a incremental X value, not a datetime. Zoom plugin doesn't work on X axis.

[silasrm]

Any solution? My data has a incremental X value, not a datetime. Zoom plugin doesn't work on X axis.

My solution is using seconds based on length of my data:

const ms = allTradesFull.length;
const startDate = moment().subtract(ms, 'second');

// chartjs config:
const config = {
  //...
  labels: allTradesFull.map((item, k) => moment(startDate).add(k + 1, 'second').toString()),
  //....
  // scales config:
  xAxes: [{
      type: "time",
      time: {
          unit: 'second',
      },
      display: false,
      scaleLabel: {
          display: true,
          labelString: 'Trade #'
      },
      ticks: {
          beginAtZero: true,
          maxRotation: 0,
      },
  }],
  // tooltip config:
  tooltips: {
      mode: 'index',
      intersect: false,
      callbacks: {
          title: function (tooltipItem) {
              return (typeof allTradesFull[tooltipItem[0].index] === 'object' && allTradesFull[tooltipItem[0].index] ? allTradesFull[tooltipItem[0].index].x : null);
          },
          label: function (tooltipItem) {
              return `${currency(tooltipItem.value, '', 2, {thousandsSeparator: '.', decimalSeparator: ','})}`;
          }
      }
  },
};

This is the result:

[kurkle]

Zoom seems to work fine (except not zooming to the actual mouse position) with 1.0.0-beta.3, but pan does not work correctly (because of skipped labels):
https://codepen.io/kurkle/pen/JjEVWZx