gauge full circle

by Chitkala More

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

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

<div >
	<div id="rtsChart" style="width: 600px; height: 300px;"></div>
</div>

JavaScript

Highcharts.chart('rtsChart', {
  legend: {
    enabled: false
  },
  chart: {
    height: 237,
    plotBackgroundColor: null,
    plotBorderWidth: 0,
    plotShadow: false,
    style: {
      fontFamily: 'roboto'
    },
  
  },
  credits: {
    enabled: false
  },
  title: {
    text: '<span style="font-size: 24px; color: #383c51">39</span><br><p style="font-size: 13px; color: #666">Total RTS</p>',
    align: 'center',
    verticalAlign: 'middle',
    y: 20,
    style: {
      fontSize: "25px",
      color: '#54575c',
      fontWeight: '500',
    }
  },
  noData: {
    style: {
      "fontSize": "20px"
    }
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: false,
        format: '{point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
          width: "40px"
        },
        connectorColor: '#ccc',
        softConnector: false,
        distance: 10
      },
      borderWidth: 0,
      borderColor: '#f9faff',
      minSize: 0,
      maxSize: 20,
      showInLegend: true,
      startAngle: 0,
      endAngle: 360,
      center: ['50%', '50%']
    }
  },
  legend: {
   
	 layout: 'vertical',
            align: 'right',
            verticalAlign: 'right',
            floating: true,
            backgroundColor: 'transparent',
            x:20,
            y:0,
             itemMarginTop: 0,
        itemMarginBottom: 17,
   labelFormatter: function () {
      return "<div><span class='legend-name float-left' style='color: #666666;font-size: 13px;font-weight: normal;font-family:roboto, sans-serif';>" + this.name + "</span> <span class='float-right'> " +this.y + " </span></div>"
      
    },
  },
  series: [{
    type: 'pie',
    name: null,
    innerSize: '85%',
    colors: [ "#f59471", '#a794ed','#81ecfe','#efd177','#7f8bb5',"#3f8ce8"],
    data: [{
        y: 5,
        name: 'Active',
      },
      {
        y: 10,
        name: 'Denied',
      },
      {
        y:...