Highchart - change the minor spacing for linear guage chart

Question

I am tryign to generate a highchart linear guage chart. Based on the documentation I checked on I was able to create the following fiddle: http://jsfiddle.net/7ch69o1p/

But I am not able to complete two things on it: Adding the Low,Medium,high on top And plotting the longer ticks on bottom.

What I am looking for an expected outcome is something like this:

Can you suggest the properties that I have to update

I think the updates are to be made here:

 gridLineWidth: 1,
 minorTickInterval: 8.33,
 minorTickWidth: 1,
 minorTickLength: 5,
 minorGridLineWidth: 1,

Answer 1

I prepared a demo which shows how to render custom text via using the SVGRenderer feature inside the render event which is trigger after each window resize to keep them responsive. Notice that I have added the id to the band where the text should be rendered, later I did a loop on them. I also added logic to centre them.

Demo: http://jsfiddle.net/BlackLabel/d3nf2yo7/

events: {
    render() {
      let chart = this,
        yAxis = chart.yAxis[0];

      //check if text exist after resize
      if (customText.length) {
        customText.forEach(text => {
          text.destroy();
        })
        customText.length = 0;
      }

      //create a text for each plotBand with id
      yAxis.plotLinesAndBands.forEach(pl => {
        if (pl.id) {
          let d = pl.svgElem.d,
            textX = d.split(' '),
            textY = d.split(' ')[2] - 5,  //where 5 is a ppadding;  
            text;               

          text = chart.renderer.text(pl.id, textX[1], textY).add();
          //set medium and high on the middle
          if (pl.id === "Medium" || pl.id === "High") {
            text.translate((textX[6] - textX[1]) / 2 - text.getBBox().width / 2, 0)

          }

          // set last value
          if (pl.id === "Significant") {
            text.translate(-text.getBBox().width + (textX[6] - textX[1]), 0)
          }
          customText.push(text);
        }
      })
    }
  }

API: https://api.highcharts.com/highcharts/chart.events.render

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text