Zoom the chart on click of external button - CanvasJS JavaScript Charts

Zoom the chart on click of external button - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div align='center'>
    <button class="button" id="zoomBtn">Zoom to 2002 and 2006</button>
    <button class="button" id="resetBtn">Reset to Default</button>
</div>
<br/>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

.button {
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
  		title:{
      	text:"Zoom the chart on click of external button"
      },
      zoomEnabled: true,
      data: [
      {
        type: "column",
        dataPoints: [
        { x: new Date(2000, 01, 01), y: 20 }, 
        { x: new Date(2001, 01, 01), y: 30 }, 
        { x: new Date(2002, 01, 01), y: 10 }, 
        { x: new Date(2003, 01, 01), y: 21 }, 
        { x: new Date(2004, 01, 01), y: 50 } ,
        { x: new Date(2005, 01, 01), y: 75 }, 
        { x: new Date(2006, 01, 01), y: 10 },
        { x: new Date(2007, 01, 01), y: 12 },
        { x: new Date(2008, 01, 01), y: 15 }, 
        { x: new Date(2009, 01, 01), y: 17 }, 
        { x: new Date(2010, 01, 01), y: 20 }
        ]
      }
      ]
    });


 chart.render();
 
 document.getElementById("zoomBtn").addEventListener("click", function(){
    chart.axisX[0].set("viewportMinimum", new Date(2002, 01, 01), false);
    chart.axisX[0].set("viewportMaximum", new Date(2006, 01, 01));
});
 document.getElementById("resetBtn").addEventListener("click", function(){
    chart.axisX[0].set("viewportMinimum", null, false);
    chart.axisX[0].set("viewportMaximum", null);
});