ticks are not equal when zoomed

[vtarelkin]

good day!

I have a standart scatter chart with x and y axis (plain numbers) with min and max values provided. Want to add zoom on it and noticed:

When I zoom in there is unequal ticks appear how could I avoid it?

My config is

`      const zoomOptions = {
            pan: {
                enabled: true,
                mode: 'xy',
                modifierKey: 'alt',
            },
            zoom: {
                mode: 'xy',
                drag: {
                    enabled: true,
                    borderColor: 'rgb(54, 162, 235)',
                    borderWidth: 1,
                    backgroundColor: 'rgba(54, 162, 235, 0.3)'
                }
            }
        };

    const options = {
        plugins: {
            zoom: zoomOptions,
            legend: {
                display: false
            },
            tooltip: {
                enabled: false
            },
        },
        responsive: true,
        scales: {
            xAxis: {
                  min: left,
                  max:right
            },
            yAxis: {
                 min:  bottom,
                 max: top
            }
        },
        elements: {
            point: {
                radius: 0,
                hoverRadius: 0,
                borderWidth: 0,
                backgroundColor: 'rgba(0,0,0,0)'

            }
        }
    };

`

Also is it possible to show rounded last tick and not float?

Thank you

[LeeLenaleee]

You could use the tick callback that is build in chart.js itself to round the tick (this will only be visual, so the actual data bound is still the float).

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      y: {
        ticks: {
          callback: function(value, index, ticks) {
            return Math.ceil(value); // Round up so it wont be weird that the tooltip can display slightly higher value as the last tick
          }
        }
      }
    }
  }
});

https://www.chartjs.org/docs/3.7.1/axes/labelling.html

EDIT: For your original problem, you can set a specific count to let chart.js know you only want to generate that many ticks. This way chart.js will always render x amount of ticks so you don't get weird spacing

[AsturaPhoenix]

Might this be a case of wanting options.scales.{x, y}.ticks.includeBounds = false? https://codepen.io/AsturaPhoenix/pen/KKeMKXo