Highcharts Demo Pie

author(s): Torstein Hønsi

by sanjshah

HTML

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

<div style="padding:0;width:700;">
  <div id="container1" style="height: 150px; width: 150px;display:inline-block;"></div>
  <div id="container2" style="height: 150px; width: 150px;display:inline-block;"></div>
  <div id="container3" style="height: 150px; width: 150px;display:inline-block;"></div>
  <div id="container4" style="height: 150px; width: 150px;display:inline-block;"></div>
</div>

JavaScript

$(function() {
  var chart1 = new Highcharts.Chart({
      chart: {
        renderTo: 'container1',
        type: 'pie'
      },
      credits: {
        enabled: false
      },
      title: {
        text: ' ',
        y: 5,
        verticalAlign: 'bottom'
      },
      tooltip: {
        enabled: false
      },
      plotOptions: {
        pie: {
          borderColor: '#fff',
          innerSize: '60%',
          dataLabels: {
            enabled: false
          }
        }
      },
      series: [{
        data: [
          ['Equities', 54],
          ['other', 46]
        ],
        colors: ['#e9b08a', '#f8f9f9']
      }]
    },
    // using 

    function(chart1) { // on complete
      var xpos = '50%';
      var ypos = '50%';
      var circleradius = 40;

      // Render the circle
      chart1.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#fff',
      }).add();

      // Render the text 
      chart1.renderer.text(chart1.series[0].data[0].percentage + '%', 62, 80).css({
        width: circleradius * 2,
        color: '#4572A7',
        fontSize: '16px',
        textAlign: 'center'
      }).attr({
        // why doesn't zIndex get the text in front of the chart?
        zIndex: 999
      }).add();
    });

  var chart2 = new Highcharts.Chart({
      chart: {
        renderTo: 'container2',
        type: 'pie'
      },
      credits: {
        enabled: false
      },
      title: {
        text: '',
        y: 5,
        verticalAlign: 'bottom'
      },
      tooltip: {
        enabled: false
      },
      plotOptions: {
        pie: {
          borderColor: '#fff',
          innerSize: '60%',
          dataLabels: {
            enabled: false
          }
        }
      },
      series: [{
        data: [
          ['Property', 24],
          ['other', 76]
        ],
        colors: ['#c2e986', '#f8f9f9']
      }]
    },
    // using

    function(chart2) { // on complete
      var xpos = '50%';
      var ypos = '50%';
      var...