Reply To: Change Time format on zoom with multiple charts

[Adithya Menon]

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