[Chartjs]-Zoom Function For Chart.js

Please see this plugin and its example.

By default, you can draw a view box or use the mouse wheel to zoom in or out. Double click to fit the chart in the canvas.

Check this example.
Here is the javascript

var timeFormat = "MM/DD/YYYY HH:mm";
function randomScalingFactor() {
  return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
}
function randomColorFactor() {
  return Math.round(Math.random() * 255);
}
function randomColor(opacity) {
  return (
    "rgba(" +
    randomColorFactor() +
    "," +
    randomColorFactor() +
    "," +
    randomColorFactor() +
    "," +
    (opacity || ".3") +
    ")"
  );
}
function newDate(days) {
  return moment()
    .add(days, "d")
    .toDate();
}
function newDateString(days) {
  return moment()
    .add(days, "d")
    .format(timeFormat);
}
function newTimestamp(days) {
  return moment()
    .add(days, "d")
    .unix();
}
function resetZoom() {
  window.myLine.resetZoom();
}
var arr = Array.from({length: 3000}, () => Math.floor(Math.random() * 40));
var config = {
  type: "line",
  data: {
    labels: _.range(0,3000,1),
    datasets: [
      {
        label: "My dataset",
        data: arr,
        fill: false,
        borderDash: [5, 5]
      },
    ]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js HUGE data set"
    },
    scales: { 
      xAxes: [
        {
          scaleLabel: {
            display: true,
            labelString: "x"
          },
          ticks: {
            maxRotation: 0,
            autoSkip:true,
          }
        }
      ],
      yAxes: [
        {
          scaleLabel: {
            display: true,
            labelString: "value"
          }
        }
      ]
    },
    pan: {
      enabled: true,
      mode: "x",
      speed: 10,
      threshold: 10
    },
    zoom: {
      enabled: true,
      drag: false,
      mode: "xy",
     speed: 0.01,
     // sensitivity: 0.1,
      limits: {
        max: 10,
        min: 0.5
      }
    }
  }
};
config.data.datasets.forEach(function(dataset) {
  dataset.borderColor = randomColor(0.4);
  dataset.backgroundColor = randomColor(0.5);
  dataset.pointBorderColor = randomColor(0.7);
  dataset.pointBackgroundColor = randomColor(0.5);
  dataset.pointBorderWidth = 1;
});
window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myLine = new Chart(ctx, config);
};

check the working example here in codepen

Check another example here

javascript is below

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        // Container for pan options
        pan: {
            // Boolean to enable panning
            enabled: true,

            // Panning directions. Remove the appropriate direction to disable 
            // Eg. 'y' would only allow panning in the y direction
            mode: 'x',

            speed: 1
        },

        // Container for zoom options
        zoom: {
            // Boolean to enable zooming
            enabled: true,                      
            // Zooming directions. Remove the appropriate direction to disable 
            // Eg. 'y' would only allow zooming in the y direction
            mode: 'x',
        }
    }
});

$('#reset_zoom').click(function(){
    myChart.resetZoom();
    console.log(myChart);
});

$('#disable_zoom').click(function(){
    myChart.ctx.canvas.removeEventListener('wheel', myChart._wheelHandler);
});

$('#enable_zoom').click(function(){
    myChart.ctx.canvas.addEventListener('wheel', myChart._wheelHandler);
});

check the working example here in jsfiddle