Joern
Posts: 3
Joined: Sun Jan 31, 2021 7:17 pm

tickInverval gets ignored, no colors in legend

Hi,

While creating my first gantt chart I came across two problems:

- the xAxis of my chart is not "datetime" but "category" and I would like to use a tickInterval of 300 ( x-values are seconds and i would like to show a tick every 300 seconds). It seems that the parameter gets ignored and 200 is being used instead
- I have 3 series with different colors configured. The legend shows each series but with a wrong (default) color.

Example: https://codepen.io/grindsa/pen/jOrJjOd

Can you please help me and tell me what is wrong with my config?

Thank you very much or for your help and have a nice day.

BR Joern
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: tickInverval gets ignored, no colors in legend

Hi,
We appreciate you reaching out to us.

For change color like series in legend you need to set chart.styledMode: "true".

About interval I set ticks xAxis.tickInterval:100, and enabled xAxis.tickWidth: 1 to visibility.
The ticks seem to be in the correct position relative to the points.

Live demo:
https://jsfiddle.net/BlackLabel/269yegwf/

API References:
https://api.highcharts.com/gantt/legend ... tion.style
https://api.highcharts.com/gantt/xAxis.tickInterval

Let me know if that was what you were looking for!
Best regards.
Sebastian Hajdus
Highcharts Developer
Joern
Posts: 3
Joined: Sun Jan 31, 2021 7:17 pm

Re: tickInverval gets ignored, no colors in legend

Hi,

Thank you for your fast response. I will check chart.styledMode later.

As for the xAxis.tickInterval: issue: maybe I was not clear enough. I need to enforce a tickIntervall of 300 which gets ignored (even in your example). Intervals of 100, 200 or 500 work well while others (300, 400, 600) get ignored.

What's the reason for this?

BR Joern
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: tickInverval gets ignored, no colors in legend

Hi,

The ticks are automatically calculated when the chart is unreadable, but with a value of 300, I can't see this problem.
The values can be set manually by entering into the array in xAxis.tickPositions and in this way I achieved this, look on example.

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

API References:
https://api.highcharts.com/gantt/xAxis.tickPositions

Let me know if it helps you.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”