JavaScript Charts & Graphs with Zoom and Pan Feature

Download JavaScript Chart Samples

Zooming & 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. Zooming & Panning are supported by all chart types with axes including line, column, area, bar, candlestick etc. Below example show a JavaScript Chart with Zooming & Panning enabled along with source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
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++;
	}
}

}

Chart Customizations

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