CODEWITHSUNDEEP
javascriptjqueryhighchartsslideraxis-labels
Mike Zavarello
Mike Zavarello

Reputation: 3554

Highcharts: some x-axis labels are disappearing after using setExtremes()

I was developing a solution for another question here on Stack Overflow (see Highcharts : selection) that has some simple slider elements (using input type="range") to change the categories shown in a column chart. Whenever the user changes the range in either slider element, the chart is redrawn using setExtremes().

I noticed that, in some instances, some of the x-axis labels disappeared, even when I moved the sliders back to their original positions. I've tinkered with a number of x-axis settings, including minPadding, startOnTick, and tickInterval, and none of them seem to solve "The Case of the Missing Labels."

The first screenshot below shows the chart when it's first loaded. All of the x-axis labels are present.

enter image description here

The second screenshot below shows the chart when I change one of the sliders. Some of the x-axis labels are now missing. It looks like they're being staggered.

enter image description here

Here's where the plot thickens: if I adjust the sliders to some other values, all of the labels come back:

enter image description here

Here's the fiddle I developed so you can see a live example of this behavior: https://jsfiddle.net/brightmatrix/uvat8u05/

I'm curious to know why this is happening, and what settings I could use to ensure that all x-axis labels are shown, regardless of what values the user chooses in the sliders.

Thank you very much!

Update: The responses from both Max Uppenkamp and Grzegorz Blachliński are valid and helpful solutions. What I also discovered by chance was that explicitly setting the slider values to integers using parseInt() solved this issue as well. It also helps in comparing both values to make sure a user doesn't choose an end date that is earlier than the start date.

Upvotes: 0

Views: 1980

Answers (1)

Max Uppenkamp
Max Uppenkamp

Reputation: 974

This seems to be intended behavior of Highcharts, however inconsistent it may be.

According to this this should be fixed in current versions of Highcharts, but you might as well try this tick formatter solution.

Edit: If the above doesn't work for you, you might be able to solve the issue by rotating your labels: http://www.highcharts.com/demo/column-rotated-labels/grid

Upvotes: 1

Related Questions