diego711
Posts: 21
Joined: Wed Jan 18, 2023 6:22 pm

Setting specific tick marks to datetime xAxis

Hi everyone!

I'm trying to set the tick marks in the xAxis (datetime) to always be at 9:30, 12:45 and 16:00hs. Using timestamp in milliseconds.

This is the xAxis object in the config.

Code: Select all

xAxis: {
      title: {
        useHTML: true,
        text: `<span class="highcharts-axis-title-dot"></span> Time`
      },
      labels: {
        y: 30
      },
      showFirstLabel: true,
      showLastLabel: true,
      units: [[
          'minute',
          [15, 30, 45]
      ], [
          'hour',
          [4, 9, 12]
      ]],
      tickInterval: 11700000,
      ordinal: false,
    },
The tickInterval is set to 11700000 because it's 3:15hs in milliseconds.

But I'm only managing to show two ticks at 12:00 and 16:00hs as seen in the image below.
Captura de pantalla 2023-01-23 121633.png
Captura de pantalla 2023-01-23 121633.png (38.28 KiB) Viewed 411 times
The showFirstLabel is'nt working properly and the tickInterval neither.

I'll always have data from 9:30 to 16hs, but the date part of the timestamp changes from day to day.

This is what I'm actually looking for
Captura de pantalla 2023-01-23 123353.png
Captura de pantalla 2023-01-23 123353.png (12.24 KiB) Viewed 411 times
Is there any mistake in the xAxis object? Is there other way to set specific ticks in the datetime axis? Is the units array syntax correct? (took it from the documentation)

Thanks in advance! I'm a little stuck with this haha
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Setting specific tick marks to datetime xAxis

Hello,

To achieve this you can use tickPositions with these hours in milliseconds.

Demo: https://jsfiddle.net/BlackLabel/1wLh8c6g/
API: https://api.highcharts.com/highstock/xA ... kPositions

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
diego711
Posts: 21
Joined: Wed Jan 18, 2023 6:22 pm

Re: Setting specific tick marks to datetime xAxis

Thank you so much!
Had to do some adaptations because the date is dynamic so I have to calculate the hour from the timestamp that I receive from an API. And it worked perfectly.

Thanks again and have a nice week!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Setting specific tick marks to datetime xAxis

You're welcome! In case of any further questions, feel free to contact us again.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Stock”