Highcharts Demo

author(s): Torstein Hønsi

by Rambabu Pudi

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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" style="height: 400px"></div>
<button id="button" class="autocompare">Select Point</button>

JavaScript

var chart = Highcharts.chart('container', {
	chart:{type:"solidgauge"},
  typeOfChart:"guage",
  plotOptions:{
  	solidgauge:{
      dataLabels:{enabled:false},
      linecap:"round",
      stickyTracking:false,
      rounded:true
    }
    },
    pane:{"startAngle":0,"endAngle":360,"background":[{"outerRadius":"100%","innerRadius":"83.33333333333333%","backgroundColor":"rgba(0,122,180,0.3)","borderWidth":0},{"outerRadius":"82.33333333333333%","innerRadius":"65.66666666666666%","backgroundColor":"rgba(201,10,90,0.3)","borderWidth":0},{"outerRadius":"64.66666666666666%","innerRadius":"47.999999999999986%","backgroundColor":"rgba(150,29,156,0.3)","borderWidth":0},{"outerRadius":"46.999999999999986%","innerRadius":"30.333333333333318%","backgroundColor":"rgba(232,86,0,0.3)","borderWidth":0}]},
    series: [{"name":"1-JAN-20","data":[{"color":"#007AB4","radius":"100%","innerRadius":"83.33333333333333%","y":46.01,}]},{"name":"1-APR-20","data":[{"color":"#C90A5A","radius":"82.33333333333333%","innerRadius":"65.66666666666666%","y":47.36,}]},{"name":"1-JUL-20","data":[{"color":"#961D9C","radius":"64.66666666666666%","innerRadius":"47.999999999999986%","y":45.27,}]},{"name":"1-OCT-20","data":[{"color":"#E85600","radius":"46.999999999999986%","innerRadius":"30.333333333333318%","y":48.55}]}]
});


// the button action
var index = 0;
$('#button').click(function () {
	index == 7 && ( index = 0)
    selectedPoint = chart.series[0].data[index++];
     selectedPoint && selectedPoint.select();
		 selectedPoint && chartData.tooltip.refresh(selectedPoint);
});