zhy0319
Posts: 8
Joined: Wed Apr 13, 2022 7:31 am

column chart render glitch when xAxis data is numeric

here is my code example
https://jsfiddle.net/zhy0319/4jL0mybd/1/
when x-axis contains number and unsorted, the chart look glitched, sorting is not an optioin here, I tested the data in google sheet, the chart look fine with exact same dataset.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: column chart render glitch when xAxis data is numeric

Hello zhy0319,
Thank you for contacting us with your issue.

This is the correct behaviour of the chart, not a glitch. You can see that there is an error 15 in the console, which is:
Highcharts expects data to be sorted
This happens when creating a line series or a stock chart where the data is not sorted in ascending X order.

For performance reasons, Highcharts does not sort the data, instead it requires that the implementer pre-sorts the data.
This is related to pointRange property, which as default is set to the lowest distance between two points from the data. To make a proper column width you can set this value as constant e.g. like in the demo below or sort your data.

Demo: https://jsfiddle.net/BlackLabel/zxeoL2ta/
API Reference: https://api.highcharts.com/highcharts/s ... pointRange

Let me know if you have any further questions!
Best regards!
Hubert Kozik
Highcharts Developer
zhy0319
Posts: 8
Joined: Wed Apr 13, 2022 7:31 am

Re: column chart render glitch when xAxis data is numeric

Thanks for the reply, I will very much like to keep the pointRange property as null.
So I guess my real question is why is x-axis so zoomed in for column/bar chart type only? How can I adjust it so x-axis is zoomed constantly across different chart types? What triggered this zoomed behavior, where can I modify?

Thank you
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: column chart render glitch when xAxis data is numeric

zhy0319,
xAxis ticks are calculated based on provided data, Highcharts expects these data as sorted and the logic of column width and xAxis ticks are built based on sorted data.

If you would like to keep the pointRange property as null you can use a callback function in data.complete property, there you can sort your loaded CSV data - just like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/7vLj419u/
API Reference: https://api.highcharts.com/highcharts/data.complete

Let me know if you have any further questions!
Regards!
Hubert Kozik
Highcharts Developer
zhy0319
Posts: 8
Joined: Wed Apr 13, 2022 7:31 am

Re: column chart render glitch when xAxis data is numeric

Thank you very much
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: column chart render glitch when xAxis data is numeric

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

Return to “Highcharts Usage”