Add mode to force zoom to use whole numbers for new min/max values

[DevidCIC]

How can I configure the zoom level on mouse wheel? I would like to zoom by 1 or by 1/10 everytime the weel is moved. In the gif below I have a chart with two Y Axes and there is a problem that one axes moves when I zoom in or out.

[benmccann]

Perhaps https://github.com/chartjs/chartjs-plugin-zoom/pull/215 will help you some?

But it seems like you also are concerned that only one of the two axes is being zoomed?

[DevidCIC]

Perhaps #215 will help you some?

But it seems like you also are concerned that only one of the two axes is being zoomed?

Thanks. But as you see the y axes starts at 0 and ends at 300. When I zoom in I get something like 258.2342353453 . But I want to zoom in in Integer number like 258, 256, 254, 252 and so on .....

Yes the second problem is that the zoom is just zooming at one axes instead of both y axes. I will open a new ticket for this

[jledentu]

But as you see the y axes starts at 0 and ends at 300. When I zoom in I get something like 258.2342353453 . But I want to zoom in in Integer number like 258, 256, 254, 252 and so on .....

@DevidCIC Mmh, not sure how to handle this, since it depends on your range (if your axis have values between 0 and 1 for instance, you'd still want labels with decimals)... Probably depends on the size of your chart, too.

[benmccann]

You could add an afterUpdate hook, where you round the scale min/max

[DevidCIC]

@DevidCIC Mmh, not sure how to handle this, since it depends on your range (if your axis have values between 0 and 1 for instance, you'd still want labels with decimals)... Probably depends on the size of your chart, too.

Yes but when I zoom in I don't want values like 0,0000123 → 0,0000125 → ...... → 0,0001023. But instead it makes more sense to configure the steps of the zoom and then you get something like 0,1 → 0,3 → 0,5 → ... → 0,9

You could add an afterUpdate hook, where you round the scale min/max

Ok I am interested, do you maybe have a small example for me ?

[benmccann]

See here: https://www.chartjs.org/docs/latest/developers/plugins.html

[hstemplewski]

@DevidCIC Did you solve this issue ? I have the same problem.

[hstemplewski]

I solve this issue using y(x)Axes config in chartjs. @DevidCIC

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function(value) {
          if (Math.floor(value) === value) {
            return value
          }
        }
      }
     }]
   }
}

[annezao]

I solve this issue using y(x)Axes config in chartjs. @DevidCIC

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function(value) {
          if (Math.floor(value) === value) {
            return value
          }
        }
      }
     }]
   }
}

you saved a life

[DevidCIC]

I solve this issue using y(x)Axes config in chartjs. @DevidCIC

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function(value) {
          if (Math.floor(value) === value) {
            return value
          }
        }
      }
     }]
   }
}

Perfect. Thanks very much. It works exactly as I want it too

[flowwdelapro]

I solve this issue using y(x)Axes config in chartjs. @DevidCIC

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function(value) {
          if (Math.floor(value) === value) {
            return value
          }
        }
      }
     }]
   }
}

Thanks this worked for me, exact thing what i searched for!

[mehadihn]

I solve this issue using y(x)Axes config in chartjs. @DevidCIC

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function(value) {
          if (Math.floor(value) === value) {
            return value
          }
        }
      }
     }]
   }
}

Thanks!

[Baribj]

I solve this issue using y(x)Axes config in chartjs. @DevidCIC

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function(value) {
          if (Math.floor(value) === value) {
            return value
          }
        }
      }
     }]
   }
}

This was causing min and max values to display "undefined".

Had to completely hide the min and max value when they had some decimals in them by:

if (Math.floor(value) === value) {
     return value;
    } else {
     return "";
}

[shanovskyi-b]

I solve this issue using y(x)Axes config in chartjs. @DevidCIC

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function(value) {
          if (Math.floor(value) === value) {
            return value
          }
        }
      }
     }]
   }
}

This was causing min and max values to display "undefined".

Had to completely hide the min and max value when they had some decimals in them by:

if (Math.floor(value) === value) {
     return value;
    } else {
     return "";
}

Still imperfect if you want to show ticks for high zoom levels (like values between "0" and "1" - "0.2", "0.4", "0.6" etc.)

Improved with following code:

ticks: {
  // for valid ticks in the middle
  precision: 2,
  // Hides min and max value that has too many decimal points during zoom/pan
  callback: (value, i, ticks) => {
    return  (i === 0 || i === ticks.length - 1) && Math.floor(+value) !== +value ? "" : value;
  },
},