Change Time format on zoom with multiple charts

[mgavserv]

Hello,

I am trying to change the time label format of the x-axis depending on the zoom level (include seconds when zooming window is < 5 minutes), but I am not successful trying multiple methods.

Here is the JSFiddle: https://jsfiddle.net/eg8nwqLv/

How can I get it accomplished?

Thank you for your help!

Best regards,
Maik

[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

[mgavserv]

Thanks for your reply Adithya!

Unfortunately, for some reason the xvalueFormatString does not work in my project at all. (You may prove me wrong in my JSFiddle).
The only value formatter that works is

labelFormatter: function (e)
{
return CanvasJS.formatDate( e.value, \”HH:mm\”);
},

But so far I have not been able to successfully integrate this with the range changing event. Do you have any examples for this?

Thanks!
Maik

[Adithya Menon]

Maik,

valueFormatString property is used to format the axis labels but you seem to be getting confused it with xValueFormatString. xValueFormatString is used to format the x-values shown in tooltip & indexlabel.

Also, labelFormatter overrides the valueFormatString property which might not work properly in your case. Setting just valueFormatString & removing labelFormatter should work fine in your case.

If you are still facing the issue, kindly share the sample project reproducing the issue over Google-Drive or Onedrive so that we can look into the code / chart-options being used, and run the project locally to understand the scenario better and help you out.

—
Adithya Menon
Team CanvasJS