davidchuco
Posts: 6
Joined: Wed Dec 05, 2018 9:48 am

xAxis label not centered on group bar chart

Hi!

I've a strange issue... I can't get the xAxis labels centered on bar chart with group... when I have 4 groups, you can see is not centered, but if you have 8 or 9 groups, the displacement is higher.

JSFiddle: https://jsfiddle.net/6xLvgpzj/

sample.png
sample.png (24.79 KiB) Viewed 175 times
any suggestion?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: xAxis label not centered on group bar chart

Hello davidchuco!
We appreciate you reaching out to us!

First of all, in your demo, there is an error 15 in the console, which means that your data is not sorted (https://assets.highcharts.com/errors/15/) I have sorted it by days and as you can see the error is gone.

Your xAxis labels are not centred on a group of points, because the dates (x-value) of these points are not the same as from ticks. To achieve the look, which you requested you have some ways.

In the first way, you can use the Highstock module and dataGrouping feature, which is set to one day - you can check it in the first demo below.

Another approach could be using tickPositions array to place ticks in desired positions (same as x-values of points), then just add a labels.formatter to show days as labels. You can see an example in the second demo below.

Demo with dataGrouping: https://jsfiddle.net/BlackLabel/qtfc48p9/
Demo with tickPositions: https://jsfiddle.net/BlackLabel/5qrLh3aj/
API Reference: https://api.highcharts.com/highstock/se ... taGrouping
https://api.highcharts.com/highcharts/x ... kPositions
https://api.highcharts.com/highcharts/x ... .formatter

Let me know if you have any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
davidchuco
Posts: 6
Joined: Wed Dec 05, 2018 9:48 am

Re: xAxis label not centered on group bar chart

Wow! I really appreciate your help!

Thanks!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: xAxis label not centered on group bar chart

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”