axis labels solid gauge

by kzoon

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container', {

  chart: {
  	//height: 200,
   	//height: 400,
   	height: 600,
    type: 'solidgauge',
    borderWidth: 1
  },

  title: {
    text: ''
  },
  pane: {
    center: ['50%', '80%'],
    size: '130%',

    startAngle: -90,
    endAngle: 90,
    background: {
      //backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '50%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    minorTicks: false,
    tickWidth: 0,
    tickAmount: 2,
    labels: {
      y: 25,
      distance: -50,
      align: 'center',
      style: {
        "fontSize": "20px"
      }
    }

  },


  series: [{
    name: 'Product',
    innerRadius: '50%',
    radius: '100%',
    dataLabels: {
      enabled: true,
      borderWidth: 0,
      format: '{y} %',

      verticalAlign: 'middle',
      style: {
        "fontSize": "30px"
      }
    },

    data: [55]

  }]
});