Maik,
You can change valueFormatString on rangeChanging event to change the format of axis labels based on zoom level. Please find the code snippet below,
function customValueFormatter(e) {
var hours=1000*60*60;
if(!e.chart.options.axisX)
e.chart.options.axisX = {};
if(e.trigger === "reset") {
e.chart.options.axisX.valueFormatString = null;
}
else if(e.trigger === "zoom") {
//Hour (Comparing Hours)
if((((e.axisX.viewportMaximum - e.axisX.viewportMinimum)/(hours))<1)) {
e.chart.options.axisX.valueFormatString = null;
}
//Day (Comparing Days)
else if(((e.axisX.viewportMaximum - e.axisX.viewportMinimum)/(hours*24))<7) {
e.chart.options.axisX.valueFormatString = "HH:mm";
}
//Year (Comparing Years)
else if(((e.axisX.viewportMaximum - e.axisX.viewportMinimum)/(hours*24*30*30))< 12) {
e.chart.options.axisX.valueFormatString = "D-MMM-YYYY";
}
else{
e.chart.options.axisX.valueFormatString = null;
}
}
}
Kindly take a look at this JSFiddle for an example on the same.
—
Adithya Menon
Team CanvasJS