Search code examples
javascripthighcharts

Highcharts min when using categories

I am trying to get the axis of my chart to look like this:

enter image description here

As you can see the number is above the line and there is a space before the plotbands.

So far I've attempted with the following fiddle:

https://jsfiddle.net/scpLr1o0/249/

If I use the min option such as:

min:-0.5

the x axis goes crazy with random numbers. So how can I make this indent into my graph?

Solution

  • If I understand what you're trying to do correctly, you need to set the tickLength of the yAxis.

    yAxis: {
      gridLineWidth: 2,
      tickWidth: 2,
      tickLength: 20,

    https://jsfiddle.net/jL8ybr3p/

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