JavaScript Line Charts with Zoom and Pan

Download JavaScript Chart Samples

Line Charts like any other chart in library support zooming and panning. It is one of the most important features of chart, especially when dealing with large amount of data. You can zoom along X, Y or both axes. Given example shows Line Chart with zooming and panning capability. It also contains 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", {
	animationEnabled: true,
	zoomEnabled: true,
	title:{
		text: "Try Zooming and Panning" 
	},
	data: data  // random generator below
});
chart.render();

}

var limit = 1000;

var y = 0;
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
	y += (Math.random() * 10 - 5);
	dataPoints.push({
		x: i - limit / 2,
		y: y                
	});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);

Chart Customizations

You can enable zooming and panning functionality using zoomEnabled property. You can also select zoomType for zooming along X-axis, Y-axis or both axes. Some other customizations include toolbar, lineThickness, lineDashType, markerType, etc.