Unable to set gape in Gauge Highchart

Question

I have tried and came this far, but still not able to implement as per requirement.

var chart = new Highcharts.chart('container', {

        chart:{
        type:'gauge',
        backgroundColor:'#000',
      },
      title: {
        text: null,
      },
      tooltip: {
        enabled: false
      },

      pane: {
        center: ['50%', '55%'],
        size: '250',
        startAngle: -135,
        endAngle: 135,
        background: {
          backgroundColor:'rgba(255, 255, 255, 0)',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc',
          borderWidth: 1,
        },
      },
      plotOptions: {
        gauge: {
          dial: {
            radius: '92%',
            backgroundColor: '#fff',
            borderColor: '#fff',
            borderWidth: 0,
            baseWidth: 4,
            topWidth: 1,
            baseLength: '80%', // of radius
            rearLength: '-67%'
          },
          pivot: {
            radius: '0%',
            borderWidth: 0,
            borderColor: null,
            backgroundColor: 'rgba(255, 255, 255, 0)',
          }
        }
      },
      yAxis: [{

        min: 0,
        max: 250,
        minPadding:5,
        minorTickInterval: 3,
        minorTickLength: 38,
        minorTickWidth: 2,
        offset:-10,
        minorTickPosition: 'inside',
        minorTickColor: 'rgba(255, 255, 255, 0.3)',

        tickPixelInterval:100,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength:-10,
        tickColor: '#fff',
        lineWidth :1,

        labels: {
          step: 1,
          distance: 16,
          rotation: 'auto',
          style:{'color':'#fff','font-weight':'bold', 'font-size': '10px'}
        },

        plotBands: [{
          from: 0,
          to: 40,
          color: '#31B710' // green
        }, {
          from: 40,
          to: 125,
          color: '#12B3D9' // blue
        }, {
          from: 125,
          to: 175,
          color: '#DD3308' // red
        }],

        plotOptions: {
          solidgauge: {
            dataLabels: {
              y: 5,
              borderWidth: 0,
              useHTML: true,
              enabled:false,
            }
          }
        },

      }],
      credits: {
        enabled: false
      },
      series: [{
        name: 'Speed',
        data: [175],
        dataLabels: {
          align: "center",
          borderWidth:0,
          borderColor: "rgba(255, 255, 255, 0)",
          className:"gauge-center-text",
          style:{
            'color': '#fff',
            'fill': '#fff',
            'font-weight': 'normal',
           'font-family': 'gargi',
          },
          useHTML:true,
          verticalAlign:'middle',
          x:0,
          y:0,
          format: '<div style="text-align:center; color:#fff; font-family: gargi; font-weight: normal; line-height: 33px;"><span style="text-align: center;font-size:38px; font-family: gargi; font-weight: normal; display:block;">{y}</span><span style="text-align: center;font-size:14px; font-family: gargi; font-weight: normal;" >Social Good</span></div>',
        },

      }]
      });

Please refer the fiddle to get the development done by me. fiddle And image to check the required gauge chart.

Please anyone have done this far so please help

Answer 1

You need two y axes, because you need two sets of ticks - the one with labels which extends to whole arc, and the other which extends to the dial.

The second y axis should be linked to the first and you need to set ticks manually with axis.tickPositioner .

 {
  linkedTo: 0,
  offset: -15,
  lineWidth: 0,
  labels: {enabled: false},
  minorTickInterval: null,
  tickWidth: 1,
  tickLength: 35,
  tickColor: 'rgba(255, 255, 255, 0.3)',
  tickPositioner: function () {
    //generate ticks from 0 to 175
    var interval = 3;
    return Array.apply(null, Array(Math.round(175 / interval))).map((v, i) => i * interval);
  }
}

Dotted lines can be set with svg presentation attribute stroke-dasharray applied on .highcharts-pane class.

.highcharts-pane {
  stroke-dasharray: 1, 3
}

example: http://jsfiddle.net/yuvdddL1/