label이 있는 gauage차트 highchart guage chart with label

See the Pen highchart guage chart with label by publisher.kim (@publisherkim) on CodePen.

 

* 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js)

  Highcharts.chart('chart', {
    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false,
    },
    pane: {
      startAngle: -90,
      endAngle: 89.9,
      background: null,
      center: ['50%', '90%'],
      size: '150%',
    },
    tooltip: {
      enabled: false
    },
    // the value axis
    yAxis: {
      min: 0,
      max: 300,
      tickColor: Highcharts.defaultOptions.chart.backgroundColor || '#FFFFFF',
      minorTickInterval: null,
      labels: {
        enabled: false
      },
      lineWidth: 0,
      plotBands: [{
        from: 0,
        to: 100,
        color: '#90e14c',
        thickness: 100
      }, {
        from: 100,
        to: 200,
        color: '#f5b93d',
        thickness: 100
      }, {
        from: 200,
        to: 300,
        color: '#f54a3d',
        thickness: 100
      }]
    },
    series: [{
        name: '단계 텍스트',
        type: 'pie',
        borderColor: 'transparent', // Transparent border color
        startAngle: -90,
        endAngle: 90,
        background: null,
        center: ['50%', '95%'], // 야매로 맞춤
        size: '160%', // 야매로 맞춤
        enableMouseTracking: false, // 차트에 mouseover 액션 false
        data: [{
          y: 1,
          name: '1',
          color: 'transparent'
        }, {
          y: 1,
          name: '2',
          color: 'transparent'
        }, {
          y: 1,
          name: '3',
          color: 'transparent'
        }],
        dataLabels: {
          distance: -50,
          format: '{point.name}단계',
          style: {
            fontSize: '14px',
            color: '#000',
            textOutline: 'none'
          }
        }
      },
      {
        name: '시리즈',
        data: [230],
        dataLabels: {
          enabled: false
        },
        dial: {
          radius: '60%',
          backgroundColor: '07080b',
          baseWidth: 12,
          baseLength: '0%',
          rearLength: '0%'
        },
        pivot: {
          backgroundColor: '07080b',
          radius: 6
        }
      }
    ]
  });