JavaScript Charts & Graphs with Zoom and Pan Feature

Zooming and Panning allows analysis of data at microscopic level and is very useful as chart may become difficult to read when plotted with large amount of data. While Zooming allows you to see data in more detail by selecting a particular region, Panning / Scrolling allows you to navigate through the chart after you zoom in. It is supported by all chart types with axes including line, column, area, bar, candlestick etc. Below example includes source code that you can edit in-browser or save to run the chart locally.

Try Editing The Code

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	animationEnabled: true,
	zoomEnabled: true,
	title: {
		text: "Try Zooming and Panning"
	},
	data: [{
		type: "area",
		dataPoints: []
	}]
});

addDataPoints(1000);  
chart.render();

function addDataPoints(noOfDps) {
	var xVal = chart.options.data[0].dataPoints.length + 1, yVal = 100;
	for(var i = 0; i < noOfDps; i++) {
		yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
		chart.options.data[0].dataPoints.push({x: xVal,y: yVal});	
		xVal++;
	}
}

}

Related Customization

You can zoom along X, Y or both axes using zoomType. Some other common customizations include color, fillOpacity, lineColor, lineThickness, etc.