confusedDude
Posts: 21
Joined: Wed Jul 27, 2022 9:31 am

gantt chart xAxis upper row(month,Year depending on scope)

Hey.

I have trouble customizing gridcolor on the upper xAxis row of the gannt chart. This is where the months or years are displayed.

I have no problem changing the color of the grid where weeknumbers are displayed.

Same goes for textcolor too.


Morten
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: gantt chart xAxis upper row(month,Year depending on scope)

Hi there,

Welcome to our forum and thank you for contacting us with your question.

On your chart, you have two xAxes. One for months or years, one for week numbers.

To address them separately, you refer to them in the API property xAxis, where you specify it as an array of objects, where each object is a xAxis.

DEMO: https://jsfiddle.net/BlackLabel/pe7fs1x8/
API Reference: https://api.highcharts.com/gantt/xAxis

Do not hesitate to contact us with any further questions,
Best regards!
Kamil Musiałowski
Highcharts Developer
confusedDude
Posts: 21
Joined: Wed Jul 27, 2022 9:31 am

Re: gantt chart xAxis upper row(month,Year depending on scope)

Hello. thank you for your quick answer. My boss happy now :D
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: gantt chart xAxis upper row(month,Year depending on scope)

Well then I am also happy! :)

Do not hesitate to contact us in the future,
Have a good day!
Kamil Musiałowski
Highcharts Developer
darren.gallois
Posts: 2
Joined: Mon Jul 10, 2023 4:18 pm

Re: gantt chart xAxis upper row(month,Year depending on scope)

Hello everyone,

I'm facing an issue with the Highcharts Gantt library and I could use some help. By default, the library adds a top x-axis that displays months and years. I have managed to modify my custom x-axis successfully. However, I'm currently stuck on customizing this specific x-axis which is default to the lib. I have spent a significant amount of time going through the documentation, but I haven't been able to find the specific class or method to use for modifying the text color, box color, and outer lines of this x-axis. I'm wondering if it's even possible to customize these elements in Highcharts Gantt.

Any guidance or suggestions would be greatly appreciated. Thank you in advance!
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: gantt chart xAxis upper row(month,Year depending on scope)

Hi!

Welcome to our forum and thanks for reaching out to us with your questions!

For instance, you could enable chart.styledMode, which allows you to fully customize styling of your chart with CSS selectors. Take a glance at this example, where you can see styled mode applied to Gantt chart: https://jsfiddle.net/gh/get/library/pur ... tyled-mode.

If you don't want to enable styled mode, you can still alter border or text of x-axis, by refering to API properties. See below fiddle to see it in action.

Demo: https://jsfiddle.net/BlackLabel/a87mo6h2/

API:
https://api.highcharts.com/gantt/chart.styledMode
https://api.highcharts.com/gantt/xAxis.labels.style
https://api.highcharts.com/gantt/xAxis.grid

Let me know which solution suits you best!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Gantt”