Zooming & Panning Tutorial in Chart - 1 | JSFiddle Sample Code

Zooming & Panning Tutorial in Chart - 1 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
  <div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/" target="_blank" title="Zooming &amp; Panning Tutorial in Chart ">https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/</a></div>

JavaScript

window.onload = function () {
    
   
    var chart = new CanvasJS.Chart("chartContainer",
    {
      zoomEnabled: true,      
      title:{
        text: "Zoom And Observe AxisX Labels" 
      },
      axisX :{
        labelAngle: -30
      },
      axisY :{
        includeZero: false
      },
      data: data  // random generator below
      
   });

    chart.render();
  }
       
   var limit = 10000;    //increase number of dataPoints by increasing this
    
    var y = 0;
    var data = []; var dataSeries = { type: "line" };
    var dataPoints = [];
    for (var i = -limit/2; i <= limit/2; i++) {
     y += (Math.random() * 10 - 5);
     dateTime = new Date(1960, 08, 15);

     //dateTime.setMilliseconds(dateTime.getMilliseconds() + i);
     //dateTime.setSeconds(dateTime.getSeconds() + i);
     //dateTime.setMinutes(dateTime.getMinutes() + i);
     //dateTime.setHours(dateTime.getHours() + i);
     dateTime.setDate(dateTime.getDate() + i);
     //dateTime.setMonth(dateTime.getMonth() + i);
     //dateTime.setFullYear(dateTime.getFullYear() + i);

     dataPoints.push({
         //x: (i+1) % 50 === 0 ? dateTime.getTime() : dateTime,
         //x: i + 345345,
         x: dateTime,
         y: y
       });
    }

     dataSeries.dataPoints = dataPoints;
     data.push(dataSeries);