score:1

Accepted answer

That behavior is related with tickInterval and tickPixelInterval properties. You can change it for example by increasing tickPixelInterval or by setting tickAmount to 2.

tickInterval: number

The interval of the tick marks in axis units. When undefined, the tick interval is computed to approximately follow the tickPixelInterval on linear and datetime axes.

yAxis: {
    tickPixelInterval: 73,
    ...
}

Live demo: https://jsfiddle.net/BlackLabel/do46qhgx/

API Reference:

https://api.highcharts.com/highcharts/yAxis.tickPixelInterval

https://api.highcharts.com/highcharts/yAxis.tickInterval

score:0

I ran your fiddle. At first I didnt know what you meant by padding but will deduce you are referring to the range of the y-axis: it's different for the two divs. You can explicitly set the max of the y-axis range in your params,

"yAxis": {

    "min": 0,
    "max": 100,

which would resolve your problem, in the sense that the two charts would use the same range. As a working solution, you could query the data to determine what the max would be in for any situation, and then round to 50 increments or another suitable increment based on your needs, then use that as the max.


Related Query

More Query from same tag