christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Customize X-Axis Range and Labels

Hi, is it possible to have the X Axis to be configured in this way:
- First level is showing Day and Date
- Second level is showing the hours and minutes
- Range to be from some date X, from 4:30PM CST, to date Y 4:30PM CST

Such that when a data is given to the chart, the data that has start time before the lower bound of the date will be cut off, but only displayed partially.
jakub.j
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: Customize X-Axis Range and Labels

Welcome to our forum and thanks for contacting us with your question!

It is possible to create to levels of xAxis using xAxis.linkedTo, to set the range you can use min and max properties.

I prepared a demo to show you how to create this kind of xAxis.

Demo: http://jsfiddle.net/BlackLabel/kyp13rh0/

Let me know if you have any further questions!

Regards
Jakub
Jakub
Highcharts Developer
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Customize X-Axis Range and Labels

I tried this in a Gantt Chart and the Hour:Minute doesn't seem to be displaying anything.

Code: Select all

      {
        type: 'datetime',
        tickInterval: 3600 * 1000,
        min: range.from,
        max: range.to,
        lineWidth: 0,
        tickWidth: 0,
        labels: {
          formatter: function(): string {
            // @ts-ignore
            return Highcharts.dateFormat("%H:%M", this.value);
          }
        }
      },
      {
        type: 'datetime',
        linkedTo: 0,
        tickInterval: 24 * 3600 * 1000,
        datetimeLabelFormats: {
          day: '%a, %e. %b'
        }
      },
jakub.j
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: Customize X-Axis Range and Labels

Hello,

Sorry, I haven't seen that you mean HIghcharts Gantt, I prepared another demo using it.
I set min and max to xAxis and navigator.xAxis by dateRange variable and use xAxis.dateTimeLabelFormats to format the labels.

Demo: https://jsfiddle.net/BlackLabel/2k95gL3u/
API: https://api.highcharts.com/gantt/xAxis. ... belFormats
https://api.highcharts.com/gantt/navigator.xAxis

Feel free to ask any further questions!

Regards
Jakub
Jakub
Highcharts Developer
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Customize X-Axis Range and Labels

Yeah this is what I need! Thank you!
jakub.j
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: Customize X-Axis Range and Labels

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

Regards
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Gantt”