Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="PreQualifiedChart" style="height: 400px"></div>

JavaScript

var SAD = 20,
  SMD = 10,
  NS = 1;
$(function() {

  $('#PreQualifiedChart').highcharts({
    chart: {
      marginTop: 0,
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      plotBackgroundColor: '#f2f2f2',
      plotBorderWidth: 0,
      plotShadow: false,
      height: 200,
      widht: 150,
    },
    credits: {
      enabled: false
    },
    exporting: {
      buttons: {
        contextButton: {
          enabled: false
        }

      }
    },
    title: null,
    tooltip: {
      headerFormat: '',
      pointFormat: '{point.name}: <b>{point.y} ({point.percentage:.1f}%)</b>'
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          distance: -50,
          style: {
            fontWeight: 'bold',
            color: '#f2f2f2',
            textShadow: '0px 1px 2px black'
          }
        },
        center: ['50%', '50%'],
        borderWidth: 0,
        borderColor: '#f2f2f2'
      }
    },
    series: [{
      dataLabels: {
        enabled: false,
      },
      type: 'pie',
      name: '',
      innerSize: '50%',
      data: [{
        name: 'Submitted All Docs',
        y: SAD,
        color: '#4B99D2',
        labels: {
          enabled: false
        },
      }, {
        name: 'Submitted Missing Docs',
        y: SMD,
        color: '#e5a34a',
        labels: {
          enabled: false
        },
      }, {
        name: 'Not Submitted',
        y: NS,
        color: '#844b03',
        labels: {
          enabled: false
        },
      }]
    }]
  });
});