Highcharts Doenut

by Alvin Olavarrieta

HTML

<link href="/app/templates/tt/assets/css/responsive.1374570068.css" rel="stylesheet">

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>


<div class="container">
      <div class="row">
        <div class="span12">
          <div class="row-fluid">
            
            <div class="span4 donut-charts">
              <div class="donut-inner">
                <span class="donut-text">65%</span>
              </div>
              
              <div id="g1"></div>
            </div>
            
            <div class="span4 donut-charts">
              <div class="donut-inner">
                <span class="donut-text">37%</span>
              </div>
              
              <div id="g2"></div>
            </div>
            
            <div class="span4 donut-charts">
              <div class="donut-inner">
                <span class="donut-text">100%</span>
              </div>
              
              <div id="g3"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

CSS

hr {
  border-color: #e9e9e9;
  margin-top: 1px;
  margin-bottom: 1px;
}
.donut-charts {
  position: relative;
}
.donut-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 76px;
  width: 50px;
  margin-left: -25px;
  margin-top: -54px;
  text-align: center;
}
.donut-text {
  color: #24CBE5;
  font-size: 32px;
  font-weight: 500;
  line-height: 36px;
}
.text-center {
  text-align: center;
}

JavaScript

$(function() {
  
  Highcharts.setOptions({
    colors: ['#24CBE5', '#EEEEEE'],
    chart: {
      type: 'pie',
      height: 200,
      spacingTop: 0,
      spacingBottom: 0,
      backgroundColor: null
    },
    credits: { enabled: false },
    title: { text: null },
    tooltip: { enabled: false },
    legend: { enabled: false },
    plotOptions: {
      pie: {
        shadow: false,
        innerSize: '96%',
        dataLabels: { enabled: false }
      }
    },
    series: [{
      size: '100%',
      innerSize: '96%',
      showInLegend:true,
      dataLabels: {
        enabled: false
      }
    }]
  });
  
  $('#g1').highcharts({
    series: [{
      data: [["sum", 65], ["other", 35]]
    }]
  });
  
  
  $('#g2').highcharts({
    series: [{
      data: [["sum", 37], ["other", 63]]
    }]
  });
  
  
  $('#g3').highcharts({
    series: [{
      data: [["sum", 100], ["other", 0]]
    }]
  });
  
});