Pie with small values

Sample Chart to manage small value of percentage

by Amit Sant

HTML

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

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

JavaScript

$(function() {
  var data = [{
    name: 'One',
    y: 5,
    color: 'red'
  }, {
    name: 'Two',
    y: 5,
    color: 'blue'
  }, {
    name: 'Three',
    y: 30,
    color: 'purple'
  }, {
    name: 'Four',
    y: 20,
    color: 'green'
  }, {
    name: 'Five',
    y: 30,
    color: 'black'
  }, {
    name: 'Six',
    y: 2,
    color: 'grey'
  }, {
    name: 'Seven',
    y: 1,
    color: 'pink'
  }];
  


  
  var start = -90;
  var series = [];
  for (var i = 0; i < data.length; i++) {
    var end = start + 360 * data[i].y / 93;
    series.push({
      name:"Count",
      type: 'pie',
      size: 200,
      dataLabels: {
      	enabled: true,
      	distance: data[i].y < 5? 30:-30,
        formatter: function() {
                        return Math.round(this.y/93*100) + ' %' + ' ('+Math.round(this.y)+')';
         }
      },
      startAngle: start,
      endAngle: end,
      data: [data[i]]
    });
    start = end;
  };
  console.log(series);
  $('#container').highcharts({
  	plotOptions:{
    pie: {
    	showInLegend: true
    }
    },
    series: series
  });
});