sayed
Posts: 13
Joined: Tue Oct 13, 2020 8:07 am

How to use Higcharts.dateFormat correctly?

Hi,
I am trying to format the x-axis ticks using Higcharts.dateFormat.
I noticed that the values are formatted correctly when using timezon. in other words I am only getting the correct format value when my timezone is UTC.
dateFormat-issue.PNG
dateFormat-issue.PNG (2.27 KiB) Viewed 3724 times
And, when I remove the timezone; I get correct result
dateFormat-issue2.png
dateFormat-issue2.png (2.09 KiB) Viewed 3724 times
Here is my custom formatter:

Code: Select all

function axisDateFormatter() {
  let chart = this;
  const unitName = chart.tickPositionInfo.unitName;

  let specifier;
  switch (unitName) {
    case "day":
      specifier = "%d"; // Day as digit
      break;
    case "month":
      specifier = "%B %Y"; // Full Month + Full year
      break;

    default:
      specifier = chart.dateTimeLabelFormat;
      break;
  }
  

  return Highcharts.dateFormat(specifier, this.value);
}

Live demo: http://jsfiddle.net/Sayed110/48mznebx/48/
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to use Higcharts.dateFormat correctly?

Hi,
Thank you for your questions.

Do you want to show your local time? Set timezoneOffset should work in your case.

Code: Select all

Highcharts.setOptions({
  time: {
    timezoneOffset: 5 * 60
  }
});

Live demo:
http://jsfiddle.net/BlackLabel/9p8uwaox/

API References:
https://api.highcharts.com/highcharts/t ... zoneOffset

Let me know if what you looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”