5단계 gauage chart highchart 5steps guage chart

See the Pen highchart 5steps guage chart 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: 100,
          tickPixelInterval: 72,
          tickPosition: 'inside',
          tickColor: Highcharts.defaultOptions.chart.backgroundColor || '#FFFFFF',
          tickLength: 50,
          tickWidth: 2,
          minorTickInterval: null,
          labels: {
            distance: -60,
            style: {
              fontSize: '12px',
              color: '#939dc1'
            },
            labels: {
              enabled: false
            },
          },
          lineWidth: 0,
          plotBands: [{
            from: 0,
            to: 20,
            color: '#8892ad',
            thickness: 50
          }, {
            from: 20,
            to: 40,
            color: '#90e14c',
            thickness: 50
          }, {
            from: 40,
            to: 60,
            color: '#42a7f4',
            thickness: 50
          }, {
            from: 60,
            to: 80,
            color: '#f5b93d',
            thickness: 50
          }, {
            from: 80,
            to: 100,
            color: '#f54a3d',
            thickness: 50
          }]
        },
        series: [{
          name: '시리즈1',
          data: [75],
          dataLabels: {
            enabled: false
          },
          dial: {
            radius: '80%',
            backgroundColor: '07080b',
            baseWidth: 12,
            baseLength: '0%',
            rearLength: '0%'
          },
          pivot: {
            backgroundColor: '07080b',
            radius: 6
          }
        }]
      });