highcharts not given the right xAxis labels on page load

Question

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:

You can see the issue with the xAxis labels.

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

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

Answer 1

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.