Highcharts : Donut

Customised Donut pie chart for POC

by fekkyDev s

HTML

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

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">

</div>
<div id="addText" style="position:absolute; left:0px; top:0px;"></div>

JavaScript

$(function() {
  // Create the chart
  chart = new Highcharts.Chart({
    chart: {
      color: '#fff',
      backgroundColor: '#336196',
      renderTo: 'container',
      type: 'pie'
    },
    title: {
      text: "What's using data",
      style: {
        "color": "#fff"
      }
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
    plotOptions: {
      pie: {
        shadow: false,
        borderColor: null
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
      }
    },
    legend: {
      align: 'right',
      layout: 'vertical',
      verticalAlign: 'middle',
      symbolRadius: 0,
      symbolPadding: 10,
      itemMarginTop: 40,
      itemStyle: {
        "color": "#fff"
      }
    },
    series: [{
      name: 'Browsers',
      data: [{
        y: 8,
        name: "Apple TV",
        color: "#A9F3D9"
      }, {
        y: 4,
        name: "Edith Macbook",
        color: "#81C1ED"
      }, {
        y: 2,
        name: "Nexus 6",
        color: "#589CD9"
      }, {
        y: 1,
        name: "Other devices",
        color: "#4279B3"
      }],
      size: '60%',
      innerSize: '70%',
      showInLegend: true,
      dataLabels: {
        enabled: false
      },
      marker: {
        symbol: 'square',
        radius: 12
      }
    }]
  }, function(chart) {
    var textX = chart.plotLeft + (chart.plotWidth);
    var textY = chart.plotTop + (chart.plotHeight);

    var span = '<div id="pieChartInfoText" style="position:absolute; text-align:center;">';
    span += '<div style="color:#fff;font-size: 20px;width:50px">6 GB</div><br>';
    span += '</div>';

    $("#addText").append(span);
    span = $('#pieChartInfoText');
    span.css('left', textX + (span.width()));
    span.css('top', textY + (span.height()));
  });
});