highcharts not given the right xAxis labels on page load

0
votes

I'm having what appears to be a highcharts sizing issue. The width of the highcharts svg, and the containing div are the same, and they are sizing correctly (going from 525px to 530px when I bump the window). However the labels act correct after the resize, but not on page load.

Here's what the chart looks like on page load:

highcharts page load

You can see the issue with the xAxis labels.

and after I size the window BIGGER (manually with my mouse):

highcharts on resize

note that I am using angularjs and the angularjs highcharts directive found here: https://github.com/pablojim/highcharts-ng. I don't think that's related however.

any help you can provide is much appreciated!

Thanks

1
javascripthighcharts
What's your expected output on load, though? You should probably show the configuration code of the chart. – Hugo Sousa
I expect it to look like what it does after I resize it a mere 5 pixels. I'll get a fiddle working to show the problem. – user3455992
If you find a solution, don't hesitate to answer your own question ;) – Hugo Sousa
You can set tickPixelInterval or tickInterval parameters to keep regular distance between ticks. – Sebastian Bochan
thank you that solved it, highcharts must not be able to detect additional label format lengths like the % added here. – user3455992

1 Answers

0
votes

Probably the labels overlap and Highcharts removes them automatically. I suggest you to give a look at the Highcharts API.

Overflow

How to handle overflowing labels on horizontal axis. Can be undefined, false or "justify". By default it aligns inside the chart area. If "justify", labels will not render outside the plot area. If false, it will not be aligned at all. If there is room to move it, it will be aligned to the edge, else it will be removed.

Changing the overflow property to "justify" may fix it, but it may not look good. Give it a try.

Another suggestion to fix this, is to give it a fixed size of lines to display the labels, with the staggerLines property. Check this Fiddle and see it fits to your problem.