eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Gantt chart: how to make dates in xAxis jump from months-years to days-months?

Hi, I'm using the gantt chart with navigator https://www.highcharts.com/gantt/demo/with-navigation.

As you change the range with navigator at the bottom, dates range in the main charts jumps from months-years, weeks-months, days-weeks. I know the default mode is designed in such way to render everything nicely, as mentioned here https://www.highcharts.com/docs/gantt/g ... ontal-axis.

But how can I change the default mode, and make it jump from months-years, days-months? I don't want to restrict the range of navigator at the bottom.

If that is not possible, can I override week number to month?

Change below to months-days
Screen Shot 2020-05-13 at 12.16.02 PM.png
Screen Shot 2020-05-13 at 12.16.02 PM.png (30.06 KiB) Viewed 5722 times
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Gantt chart: how to make dates in xAxis jump from months-years to days-months?

Hello,

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

To override the label you could use the labels.format property, keep in mind that it will override it permanently meaning that the label will have the same format regardless of the selected range. If you want to have better control over the labels you could use labels.formatter - using this property you could override the labels just under specific conditions - for example, override the labels only when its range is set to week.

Take a look at a simple demo I prepared for you, as you can see there I am using Highcharts.dateFormat method to change the format of the label just in the week range - the only drawback is that it is not deleting or merging the week's cells so now we might have 7 cells with the same month's name.

API references:
https://api.highcharts.com/gantt/xAxis.labels.format
https://api.highcharts.com/gantt/xAxis.labels.formatter
https://api.highcharts.com/class-refere ... dateFormat

Live demo: https://jsfiddle.net/BlackLabel/2gk67zrm/

Let me know if you have any further questions!
Mateusz Kornecki
Highcharts Developer
eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Re: Gantt chart: how to make dates in xAxis jump from months-years to days-months?

Thanks Mateusz, your answer is so helpful! I achieved what I want.
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Gantt chart: how to make dates in xAxis jump from months-years to days-months?

You're welcome ;)!

If I may clarify any matters I am available at your convenience.

Regards.
Mateusz Kornecki
Highcharts Developer
eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Re: Gantt chart: how to make dates in xAxis jump from months-years to days-months?

Hi mateuszkornecki,

when there are two xAxis, one for top row and one for bottom row, is it possible for the top row to have this.tickPositionInfo.unitName of the bottom row? I want to override top row's label based on both top and bottom's current units.

See my jsfiddle for explanation https://jsfiddle.net/ohrjuxf0/
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Gantt chart: how to make dates in xAxis jump from months-years to days-months?

There are two ways to achieve that. You could store the information from the bottom axis in a global variable and then use it in the formatter of the top axis or you try to access that information straight from the top one ( you can access the array of all x axes under this.chart.xAxis). Keep in mind that you might find there three axes instead of two - the additional one comes from the navigator.

Regards.
Mateusz Kornecki
Highcharts Developer
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: Gantt chart: how to make dates in xAxis jump from months-years to days-months?

@mateuskornecki Can you elaborte on this please?

In your https://jsfiddle.net/BlackLabel/2gk67zrm/
When you zoom in such that the top row becomes "November custom. December custom" (for example from 2018-11-25 to 2018-12-25), then the bottom row also becomes "Nov, Dec, Dec, Dec, ...". This seems strange? Is there a way to prevent this double information from showing? It would be better to have the weeks or days showing then in the bottom row?

I also wonder how we can alwyas have an extra top row to show the years.

P.S.: Your https://jsfiddle.net/ohrjuxf0/ is no longer working.

Further more, I wonder how to include a small bar for today's date, for example using var today = new Date(),. I managed to find a tutorial to do this, but I do not know how to combine it with what you are doing here.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt chart: how to make dates in xAxis jump from months-years to days-months?

Hi 888ba8,

We appreciate you reaching out to us.

Now is available new documentation for setting the date-time axis label, please check the documentation.
https://api.highcharts.com/gantt/xAxis. ... belFormats

Live demo:
https://jsfiddle.net/BlackLabel/jLnf2w59/

About current bar, good way is to use xAxis.currentDateIndicator, here is a good example where is used.
https://jsfiddle.net/gh/get/library/pur ... management
https://api.highcharts.com/gantt/xAxis. ... eIndicator

Let me know if that was what you were looking for.
Kind regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”