KarlBaumann
Posts: 39
Joined: Fri Jul 06, 2018 4:47 pm

Different time intervals for part of the X axis

I need to create a following chart. Any idea how to achieve the empty space from 2018 to Sep 2022 ?
Image

Thank you in advance!
jakub.s
Posts: 1167
Joined: Fri Dec 16, 2022 11:45 am

Re: Different time intervals for part of the X axis

Hi,

Thanks for the question!

You could use the xAxis.tickPositions.

Here's a demo: https://jsfiddle.net/BlackLabel/7mcbh6pj/
API: https://api.highcharts.com/highcharts/x ... kPositions

Let me know if that helps!

Best regards,
Jakub
Jakub
Highcharts Developer
KarlBaumann
Posts: 39
Joined: Fri Jul 06, 2018 4:47 pm

Re: Different time intervals for part of the X axis

thanks for the reply Jakub! It does help, but there is something more needed.

I guess I should have mentioned that earlier - those intervals are also "squeezed". As I understand, using xAxis.tickPositions I can only skip some ticks.
Do you know if there is also a way to compress those parts? There should be a lot of points in that short 2018 to SEP 2022 period.
jakub.s
Posts: 1167
Joined: Fri Dec 16, 2022 11:45 am

Re: Different time intervals for part of the X axis

Hi,

I understand now. It's impossible to have 2 different scales on the same axis in Highcharts.

So the easiest solution to this I see is to create two xAxis and position them next to each other. Then, you can have completely different settings for these axes.

Here's a demo: https://jsfiddle.net/BlackLabel/kaufze1q/

Let me know if that's better.

Best regards,
Jakub
Jakub
Highcharts Developer
KarlBaumann
Posts: 39
Joined: Fri Jul 06, 2018 4:47 pm

Re: Different time intervals for part of the X axis

Thanks Jakub, the dual axis solution works great. Just some minor problems:
TLDR: Series from both axis are displayed in the shared tooltip and there is a gap between both axis.

More details:
Troubles arise when the x values are strings, the axis types are category and the shared tooltip is enabled. E.g. https://jsfiddle.net/q870h2ub/ shows that the two axis seem to be connected, whenever you hover over one series the tooltip shows also the other series from the other axis. We realised that this starts working when we use numeric x values for the points and let them explicitly count up and not intersect for both series. So, presumably the numeric xAxis values of the points which are inferred from the string as the docs say, are somehow "connecting" the two axis here? Do you have any better ideas to keep using this workaround with string x values like in our case?

And another interesting thing - we wanted to get rid of the padding between the axis and apparently this only works when the axis type is not category. See https://jsfiddle.net/q870h2ub/ vs https://jsfiddle.net/nzrkuwah/ . Any idea what the reason for that might be?
jakub.s
Posts: 1167
Joined: Fri Dec 16, 2022 11:45 am

Re: Different time intervals for part of the X axis

Thanks!

You're right, but that's just how tooltip.shared works with xAxis.type = 'category'.

In your case, you should use xAxis.type = 'datetime'. You can use xAxis.tickPositions and xAxis.labels.formatter() to get the right date format, but categories is not the way to go with the chart you're about to create.

Categories will not only make the tooltip.shared work like you described, but it will also "center" each category which creates this padding between axis that you want to avoid. With xAxis.type = 'datetime' you get rid of all those problems (and you can still have the same labels text).

Here's how I'd do it: https://jsfiddle.net/BlackLabel/g9Lrwkb1/

Here's how you can use xAxis.labels.formatter: https://api.highcharts.com/highcharts/x ... .formatter

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Usage”