RoundTip donut chart

author(s): Faisal Khan

by Faisal Khan Janjua

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 class="usageCharts mins">
  <div class="chartHolder">
    <div id="lineVoice" style="width: 232px; height: 232px; float: left"></div>
      <div class="guageInfo">
        <h1><span>Used</span>12,000<span>Used</span></h1>
        <p>Total <strong>4,500 Mins</strong></p>
      </div> 
  </div>
  <p class="guageTitle">Data</p>
</div>

SCSS

.chartHolder {
  position: relative;
  text-align: center;
  display: inline-block;
}
.usageCharts {
  margin: 0 auto;
  position: relative;
  text-align: center;
  display: inline-block;
}
.guageInfo {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: auto;
  display: table;
  position: absolute;
  vertical-align: middle;
  & h1 {
    margin:0;
    color:#F99;
    & span {
      color: #666;
      font-size: 30%;
      font-weight: 400;
      display: block;
    }
  }
  & p {
    margin:0;
  }
}

JavaScript

jQuery('#lineVoice').highcharts({
  chart: {
    type: 'solidgauge'
  },
  title: null,
  tooltip: {
    enabled: false
  },
  pane: {
    startAngle: 0,
    endAngle: 360,
    background: {
      backgroundColor: '#ECEEF0',
      innerRadius: '90%',
      outerRadius: '100%',
      borderWidth: 0
    }
  },
  yAxis: {
    /* stops: [
      [1, '#B90011'], // green
    ], */
    min: 0,
    max: 100,
    labels: {
      enabled: false
    },

    lineWidth: 0,
    minorTickInterval: null,
    tickPixelInterval: 400,
    tickWidth: 0
  },
  plotOptions: {
    solidgauge: {
      innerRadius: '90%',
      linecap: 'round',
      rounded: true
    }
  },
  series: [{
    name: 'Speed',
    data: [{ y: 34, color: '#B90011' }],
    dataLabels: {
      enabled: false
    }
  }],
  credits: {
    enabled: false
  },
});