data label position half gauge

by kzoon

HTML

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

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

JavaScript

Highcharts.chart('container', {



  "chart": {
    "type": "solidgauge",
  },

  "pane": {
    "startAngle": -90,
    "endAngle": 90,
    "background": [{
      "innerRadius": "10%",
      "outerRadius": "100%",
      "shape": "arc"
    }]
  },
  "title": {
    "text": "",
    "margin": 0
  },


  "plotOptions": {
    "solidgauge": {
      "dataLabels": {
        "enabled": true,
        "borderWidth": 0,
        "verticalAlign": "bottom",
        "style": {
          "fontSize": "10px",
          "fontWeight": "normal"

        },
        "useHTML": true

      }

    }
  },

  "yAxis": [{

    "lineWidth": 0,
    "lineColor": "rgba(177,177,177,1)",
    "tickWidth": 0,
    "tickLength": 5,
    "tickmarkPlacement": "on",
    "tickAmount": 2,
    "minorTicks": false,

    "labels": {
      "y": 18,
      "distance": "80%",
      "style": {
        "fontSize": "16px",
      }
    },
    "min": 0,
    "max": 100,

  }],
  "series": [{
    "data": [81.3]
  }]


});