Grafica dona (mitad)

librería utilizada: higcharts

by Hugo Lizama

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>


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

JavaScript

$(function() {
  Highcharts.chart('container', {
    chart: {
    	type: 'pie',
      options3d: {
        enabled: true,
        alpha: 40
      },
      plotBackgroundColor: null,
      plotBorderWidth: 0,
      plotShadow: false,
      margin: [-200, -100, -50, -100],
      
    },
    title: {
      text: 'Total<br>Actas<br>10,621',
      align: 'center',
//      verticalAlign: 'middle',
      y: 250,
     	style: { "color": "#333333", "fontSize": "24px" }
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
//      	innerSize: 100,
        depth: 65,
        dataLabels: {
          format: '<b>{point.name}</b><br/> {point.y:,.0f} ({point.percentage:.1f} %)',
          enabled: true,
          distance: -70,
          style: {
          	fontSize: "14px",
            fontWeight: 'bold',
            color: 'white'
          }
        },
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '80%'],
        showInLegend: false
      }
      
    },
    series: [{      
      name: 'Porcentaje',
      innerSize: '50%',
      data: [{
        name: 'Procesadas',
        y: 5000,
        yFormat: '5,000',
        dataLabels: {
          enabled: true
        },
        color: '#41f9f3'
      }, {
        name: 'Pendientes',
        y: 5621,
        yFormat: '5,621',
        dataLabels: {
          enabled: true
        },
        color: '#f8bc3b'
      }]
    }]
  });
});