Vertical Lines are not aligned properly across levels when Highcharts starts sampling

[nishikantparmariam]

Reproducer - https://jsfiddle.net/u694sd0z/

When there is sampling in original ticks due to large no. of x-values i.e. not all ticks are visible for each category then vertical lines across levels are not aligned properly, can you please fix the issue or help us in understanding how it can be fixed?

Possibly it is related to considering only the current active ticks (tick.isActive) for figuring out position for a category and not all ticks (group.leaves) ?

grouped_categories/grouped-categories.js

Lines 594 to 595 in c606806

	minPos = tickPosition(tick, mathMax(group.startAt - 1, min - 1));
	maxPos = tickPosition(tick, mathMin(group.startAt + group.leaves - 1 - fix, max));

[magdalena-gut]

Thank you for reaching out to us! We need to investigate this more deeply as the newest version works a bit differently than the 10.3.3 version you used in the demo. It's hard to give an exact ETA, but we will do our best to provide a relevant solution as soon as possible.

@KacperMadej, can you please take priority for this task?

[KacperMadej]

Hi @nishikantparmariam

The grid is off because when the labels don't have enough space they enter a more dense placement mode that centers the labels on the ticks instead of placing them in between ticks. The in between placement is the starting point for the grouped categories plugin. The skipping can be prevented by setting xAxis.labels.step to 1 to force show all labels.
Demo: https://jsfiddle.net/BlackLabel/x5tb9dak/

Please let me know if you have any more questions and if the issues could be closed in case the problems is resolved.

[nishikantparmariam]

Hi @KacperMadej thanks for the reply.

While now the vertical lines are places properly but all labels are rendered which makes them unreadable in less widths. Is there a way to fix this properly i.e. sampling happens and vertical lines are aligned properly?

---

Additionally, do we have any way to pass a callback or listen to event when Highcharts triggers sampling?

[KacperMadej]

Right, so in short, sampling for text but draw all lines. This feature is not implemented - we could create a feature request about this for the plugin.

The sampling could be done using label formatter and returning empty string for every text label you want to hide.
https://jsfiddle.net/BlackLabel/x5tb9dak/3/
However, the result still looks strange and it is unclear where exactly should the label be placed -

Additional question:
Sampling, in this case, is triggered by an internal Highcharts Axis' unsquish function when rotated labels are a better fit due to the limited space available for the axis labels. The closest existing event emitter is 'afterSetTickPositions' on Axis where you could check what's the tickInterval and if it is larger than 1 then the ticks has been sampled.
Here's a live demo with the detection: https://jsfiddle.net/BlackLabel/x5tb9dak/2/

[nishikantparmariam]

Hi @KacperMadej, logged a feature request - #220.

the result still looks strange and it is unclear where exactly should the label be place

Yes, this does not handle all cases and categories of other levels cannot be controlled using this.