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.
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++;
}
}
}
You can zoom along X, Y or both axes using zoomType. Some other common customizations include color, fillOpacity, lineColor, lineThickness, etc.