Dominik Welte
Posts: 11
Joined: Wed Sep 28, 2022 8:51 am

Mirroring xAxis to the bottom of the chart.

Hello friends,
i have a problem with "mirroring" the xAxis from top to bottom of the chart.

I would like to display the exact same xAxis at the bottom of a chart. Especially the dates are important.
I use a gantt chart and i tried to use
opposite: false,
linkedTo: 0
but this somehow only mirrors the calenderweeks and not the dates of days.

Please see my jsfiddle:
https://jsfiddle.net/r5qcatud/46/

It would be great if you find a solution for this because i struggle quite since some hours of work to finish this off...

Thanks in advance

Best regards
Dominik
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Mirroring xAxis to the bottom of the chart.

Hi,

In order to achieve the same xAxis on opposite site of the chart, you should set consistent tickInterval and dateTimeLabelFormats on "cloned" axis. For example, in 3rd axis, I've set tickInterval to one day and on the last one it is set to one week, resulting in mirrored axis. You can see these changes in demo below.

Live demo: https://jsfiddle.net/BlackLabel/0x76nzgb/

API: https://api.highcharts.com/gantt/xAxis.tickInterval

Let me know if that was what you were looking for.
Best regards!
Jędrzej Ruta
Highcharts Developer
Dominik Welte
Posts: 11
Joined: Wed Sep 28, 2022 8:51 am

Re: Mirroring xAxis to the bottom of the chart.

Hi,
yes this was exactly what i was looking for thanks a lot !.
I just noticed that if i refresh the page and the navigator gets set on it's default position, 2 of the xAxes won't show the information. As soon as i move the navigator one pixel all the information on the xAxes gets shown.
Is there a fix for this ? I tried to move the navigator in the events for one pixel automatically, but this didn't work due to i don't get the navigator.handles[0].translateX correct value at that point. I tried it with a load and render event but neither of both worked.

Please see the attached pictures.

Best regards
Dominik
Attachments
xAxis_after_refresh_and_moving_of_navigator.PNG
xAxis_after_refresh_and_moving_of_navigator.PNG (20.49 KiB) Viewed 3077 times
xAxis_after_refresh.PNG
xAxis_after_refresh.PNG (16.69 KiB) Viewed 3077 times
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Mirroring xAxis to the bottom of the chart.

Hi!

Glad I could help you with your problem!

Based on the attached pictures it seems like it could be a bug, but I wasn't able to reproduce this occurence. Could you please provide a simplified demo with steps to reproduce, so I can investigate it further?

Best regards!
Jędrzej Ruta
Highcharts Developer
Dominik Welte
Posts: 11
Joined: Wed Sep 28, 2022 8:51 am

Re: Mirroring xAxis to the bottom of the chart.

Hi,
i tried to replicate the problem in JSfiddle, but i couldn`t.
The problem is similar to the following JSfiddle:
https://jsfiddle.net/go52yehc/20/

Due to multiple xAxes, it seemed like a problem with the setExtremes for the xAxes.
First i only had:
this.xAxis[0].setExtremes(startDate, endDate);
in my code.
Now i changed to :
this.xAxis[0].setExtremes(startDate, endDate);
this.xAxis[1].setExtremes(startDate, endDate);

This fixed the problem for me.

Due to it is a quite big project with Django in the Backend, it is hard for me to reproduce the exact situation for me sorry...

Best regards
Dominik
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Mirroring xAxis to the bottom of the chart.

Hi!

Thanks for the fiddle! Although it wasn't the same case, perhaps the problem occured because of setting extremes only for one xAxis. In this example you have 8 xAxis, and all of them should have setExtremes method applied on them.

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

If the problem still occurs regardless of proposed solution and you believe it could be a bug, you can report it here: https://github.com/highcharts/highchart ... new/choose.

Let me know if this solution works for you!
Best regards!
Jędrzej Ruta
Highcharts Developer
Dominik Welte
Posts: 11
Joined: Wed Sep 28, 2022 8:51 am

Re: Mirroring xAxis to the bottom of the chart.

Hi,
i tried to set all xAxis extremes but it takes incredibly long to script this. It takes so long that my browser says the page doesn't respond.
I have a general problem especially with scripting. The Turbothreshold is set to 50000.
I think the main problem is the formatter and the xAxis.
This is the configuration for my chart:
https://jsfiddle.net/wg90zsta/4/

I am sorry i can not simulate exactly due to confidential data.
What i can tell you is that i have 42 Employees in the categories_arr and 461 datapoints in the data_arr. I have seen highcharts with 600000 datapoints that get rendered in a second. Especialy the datapoints can get more and then this takes just too long to script.
I think there i a combination of the formatter function in the plotOptions and the amount of 8 xAxis, due to the timerange i need to show sometimes is 4 years.

Do you have any suggestion on how to improve the performance ?

Best regards
Dominik
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Mirroring xAxis to the bottom of the chart.

Hi!

I was able to generate random and pollute series based on your description and chart config. Indeed, the biggest performance bottleneck is huge amount of xAxis, if i switch to default xAxis setting, the chart loads significantly faster. Also, as you noticed correctly, formatter function in plotOptions.dataLabels adds a bit to the load time, but it doesn't degrade performance that much.

Unfortunately, for now the boost module isn't compatible with gantt chart, but if you believe it would be useful, you can upvote and leave your feedback
on this feature request: https://highcharts.uservoice.com/forums ... antt-boost. With decent amount of votes, it might get implemented in the future.

You could also consider asynchronous fetching of data within desired range, so you don't pollute chart with thousands of points when only a subset is visible to the user. See this thread here: viewtopic.php?t=49228&p=178834.

What I would highly recommend instead of using 8 xAxis is to enable scrollablePlotArea after the initial load of the chart. This way the xAxis and navigator stay fixed on top of the chart, and the user can scroll through whole plot area. You can still customize top xAxis with desired values, but the performance increase is worth considering in this approach.

Live demo: https://jsfiddle.net/BlackLabel/39qfm6vk/

API:
https://api.highcharts.com/gantt/chart. ... lePlotArea
https://api.highcharts.com/class-refere ... art#update

Let me know if this works for you!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Gantt”