Improving default ticks in Highstock Charts

[nishikantparmariam]

Description of the feature

Coming from this thread, we would like to request for feature where Highstock calculates best possible tick positions (we care more when ordinal is set to True), so that below issues are not there -

1. Last label getting cut-off.
2. No. of ticks don't change drastically upon adding a y-title
3. Ticks are as good as when ordinal is False.

Library related to the feature

Highstock

[TorsteinHonsi]

Thanks for writing!

1. The last label is cut off because there is no more space to the right in this chart. If we add a chart border, it's more clear: https://jsfiddle.net/highcharts/rb829ohz/ . You could disable the ellipsis, but I wouldn't recommend it because it causes the label to overflow both left and right: https://jsfiddle.net/highcharts/rb829ohz/1/ . A slightly better solution in this case would be to increase the right margin, though in other cases it may be wasted space: https://jsfiddle.net/highcharts/rb829ohz/2/
2. This is how tickPixelInterval works. There will be threshold values, so that when the length of the axis passes a certain threshold, the tick interval will be recomputed to fit a certain tickPixelInterval setting. You can think of this as responsive breakpoints, and in this case adding the y-axis title caused the axis to pass the breakpoint.
3. They will never be exactly the same because non-ordinal axis are linear. With ordinal axes we have a more complicated algorithm to lay out the ticks. It is a compromise between applying ticks to higher-order datetimes (midnights over regular hours, month starts over other dates etc), and a sensible spacing of the ticks.

[nishikantparmariam]

Thanks @TorsteinHonsi, I am looking for ways here in which we can know that something is wrong so we can correct it or tell user to correct it by passing some options. More specifically if Highchart can tell before or after chart render that this is wrong and we can read that value to take next steps.

For right label cut-off issue -

though in other cases it may be wasted space

Is there a way or property we can read from chart before or after render to know this is happening, in this case we would update the chart with a right margin, otherwise not.

For tick positioning and threshold

Is there a way to know that threshold has reached or no. of ticks will be very less - in this case we (user) can set ordinal to true. Or, are there any ways in which this algorithm could be improved to display more ticks.

[TorsteinHonsi]

Is there a way or property we can read from chart before or after render to know this is happening,

The only solution I can think of is that you create a chart load event, and in that event you check if the last x-axis label has an ellipsis. If it does => increase the right margin.

Is there a way to know that threshold has reached or no. of ticks will be very less - in this case we (user) can set ordinal to true. Or, are there any ways in which this algorithm could be improved to display more ticks.

You could do the same here - attach a listener to chart load (or render), and adjust the axis layout. But beware that changing ordinal to true or false also affects the whole chart and the way the series is rendered. In general I would stick with the Highcharts defaults here, they usually work best.

Maybe there is something that we can do with the tick layout in this particular case https://jsfiddle.net/rq1x9c8e/2 .
@pawelfus Do you know why the ticks are not more evenly spaced? In this case I think the ticks would appear more balanced if the mid tick was placed on February 16.

[pawelfus]

This is caused by the default value of tickPixelInterval option. It is 100px, so the tick would be too close. If we decrease this value, for example to 90px, more ticks will be rendered: https://jsfiddle.net/BlackLabel/pvj36uwx/2/ (with disabled autoRotation: https://jsfiddle.net/BlackLabel/pvj36uwx/3/)