Hide Zoom / Pan & Reset Button by default when programmatically zoomed used viewportMaximum and bring it after zooming | CanvasJS JavaScript Charts

Hide Zoom / Pan & Reset Button by default when programmatically zoomed used viewportMaximum and bring it after zooming | 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 id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

.canvasjs-chart-toolbar {
  display: none;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {  
	zoomEnabled: true,
  title:{
    text: "Try Zooming And Panning"
  },
  axisX: {
  	viewportMaximum: 50
  },
  rangeChanged: function(e){
  	if(e.trigger === "reset") {
    	document.getElementsByClassName("canvasjs-chart-toolbar")[0].style.display = "none";
    }else { //if(e.trigger ==="zoom" || e.trigger === "pan")
    	document.getElementsByClassName("canvasjs-chart-toolbar")[0].style.display = "block";
    }
  },
  data: [{
  	type: "line",
  	dataPoints: randomData(100)
  }]

});

chart.render();

function randomData(limit){
limit =  limit || 1000;    //increase number of dataPoints by increasing this

var y = 100;
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
  y += (Math.random() * 10 - 5);
  dataPoints.push({
    x: i,
    y: y
  });
}
return dataPoints;
}