How to fix column range grid distance in HighCharts?


I have a columnrange highchart. The vertical distance between two horizontal gridlines depends on the number of points I plot.

For example if, I have 6 points at different vertical height, the grid distance is more and if I increase grid points to say 10-12, the distance reduces.

I understand that this is because, the chart is trying to fit the entire height by adjusting the vertical distance between two gridLines in two cases above.

However, Is it possible to fix the gridLines distance irrespective of number of points to be plotted and adjust the overall height of the chart container accordingly.

I tried :

                            distance:10 //fixed

Fixing tickInterval also does not helps. Also I tried giving height:auto to my chart container but that didn't work.

Though it seems basic to fix distance between gridLines, I am somehow not getting it done. Please some one help. Demo here


This is probably what you are looking for?

yAxis: {
   tickPixelInterval: 10

You could calculate how big should your chart be and resize it, so the grid lines will have constant distance between each other.

var gridLinesDistance = 20, //in pixels
  top = chart.plotTop,
  bottom = chart.spacing[2],
  axis = chart.xAxis[0],
  range = axis.dataMax - axis.dataMin   1,
  newHeight = top   range * gridLinesDistance   bottom;

$("#container").height(newHeight   'px');
chart.reflow(); //adjust the chart to the new size


This video can help you solving your question :)
By: admin