Disable Panning in Individual Charts of StockChart | CanvasJS

Disable Panning in Individual Charts of StockChart | CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>

<div id="chartContainer" style="height: 430px; width: 100%;"></div>

JavaScript

var dataPoints = [];

var stockChart = new CanvasJS.StockChart("chartContainer",{
  theme: "light2", //Change it to "light1", "dark1", "dark2"

  title:{
    text:"Disable Panning in Individual Chart"
  },
  subtitles: [{
  	text: "Use Navigator for Panning"
  }],
  rangeChanged: function(e) {      
    disablePanning(e.stockChart);
  },
  charts: [{
    data: [{  
      type: "line",
      dataPoints : dataPoints
    }]
  }],
  navigator: {
    slider: {
      minimum: new Date(2018, 03, 10),
      maximum: new Date(2018, 07, 17)
    }
  }
});

$.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data) {  
  for(var i = 0; i < data.length; i++){
    dataPoints.push({x: new Date(data[i].date), y: Number(data[i].close)});			
  }	
  stockChart.render();
  disablePanning(stockChart);
});

 window.addEventListener("resize", function(){
 	disablePanning(stockChart);
 }); 

function disablePanning(stockChart) {
	for(var i = 0; i < stockChart.charts.length; i++) {
  	stockChart.charts[i].panEnabled = false;
  }
}