how can i remove the decimals from the tick when im zooming?

Question

im using the plugin for chart.js chartjs-plugin-zoom for zooming my chart, but i have some ticks problems. when i make zoom, the tick get a los of decimals, how can i remove the decimals?

my tick configuration doesnt contain decimals, i have 2 axes, 1 for totals (left) and 2 for percentage, that one its having the problem,and i cant put a range limit on the zooming because i dont know how big will be the data

this are my configurations:

'    public bondadOptions2: (ChartOptions) ={
     responsive: false,
     tooltips:{
     titleFontSize:0,
     titleMarginBottom:0,
     bodyFontSize:12,
   callbacks: {
    label: function (tooltipItem, data) {
    var label = data.datasets[tooltipItem.datasetIndex].label || '';
    if (label) {
        label += ': ';
    }
    label += Number(tooltipItem.yLabel).toFixed(2);
    return label;
  }
 }
},
scales: {
  yAxes: [{id:'y1',
   position: 'left',
   ticks: {
    fontColor: '#949494',
    display:true,
    padding: 5,
    fontSize: 10,
    min: 10,
    suggestedMax: 100,
    stepSize: 10
  },
  gridLines: {
    color: '#949494',
    drawTicks: false,
    display:true,
    zeroLineColor: '#949494',
    drawBorder:true
  }
}, 
{ id:'y2',
  position: 'right',
  type: 'linear',
  ticks: {
    fontColor: '#949494',
    display:true,
    padding: 5,
    fontSize: 10,
    min: 0,
    suggestedMax: 100,
    stepSize: 10,
    callback: function(value) {
      return value + "%"
  }
  },
  gridLines: {
    color: '#949494',
    drawTicks: false,
    display:false,
    zeroLineColor: '#949494',
    drawBorder:true
  }
}],
xAxes: [{
  ticks: {
    beginAtZero: false,
    fontColor: '#949494',
    padding: 5,
    display: true,
    
    max:20,
    min:0,
  },
  gridLines: {
    color: '#949494',
    drawTicks: false,
    display:true,
    zeroLineColor: '#949494',
    drawBorder:true,
    offsetGridLines:true
  }
 }]
  },plugins: {
    zoom: {
      // Container for pan options
      pan: {
   
        enabled: true,
        drag:true,
        mode: 'xy ',
        rangeMin: {
            x: null,
            y: 0
        },
        rangeMax: {
            x: null,
            y: null
        }
    },

    zoom: {
        enabled: true,
        
        mode: 'xy',
        rangeMin: {
            x: null,
            y: 0
        },
        rangeMax: {
            x: null,
            y: null
        }
      }
    }
  }
}'

Answer 1

You could try to round the value on the percent y-axis within the ticks.callback function as follows:

{ 
  id:'y2',
  ...
  callback: value => Math.round(value) + "%"
}