HighCharts - Y-Axis padding in a bar chart

11
votes

I use a style of y-axis labels in which each number is placed, left-aligned, on top of its respective horizontal grid line, like in the image below.

The only complication with this in HighCharts is that the axis labels will sometimes overlap with the first column in a column chart.

Updated demo: For an example, see this chart: http://jsfiddle.net/NWsgz/1/

y-axis issue in highcharts

I have tried to achieve this using xAxis.minpadding, but that property seems to have no effect on column charts. Is there a way in Highcharts to get the effect I am going for? I could theoretically get the effect by making the bars very narrow, but I am looking for another solution.

3
javascripthighcharts

3 Answers

4
votes

It doesn't work for categorized axis - in that type,axis is divided into equal categories, so min/max padding isn't allowed.

Possible solution is to use standard axis, but use formatter for axis, see: http://jsfiddle.net/NWsgz/4/

13
votes

I've come up with a workaround, but it is not perfect.

  1. Separate the yAxis from the chart using yAxis.offset
  2. Use extra-long tick marks to simulate the gridlines extending off to the left

Like this: 

yAxis: {
  offset: 30,
  tickLength: 30, // Same value as offset
  tickPosition: "inside",
  tickWidth: 1,
  tickColor: "black", // The same as your gridLine color
  labels: { 
    align: 'left',
    x: 0,
    y: -8 // Position labels above their gridLine/tickMark
  }
}

For a demo, see http://jsfiddle.net/supertrue/NWsgz/2/

Why it's not ideal

I want my gridLines to use a dash style (e.g. dashStyle: 'longdash'), but there doesn't appear to be a way to apply a dash style to tick marks.

I would love to hear if there's a way to do this, or a better workaround.