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

[confusedDude]

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]

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!

[confusedDude]

Hello. thank you for your quick answer. My boss happy now

[kamil.m]

Well then I am also happy!

Do not hesitate to contact us in the future,
Have a good day!

[darren.gallois]

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]

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!