JSFiddle - React, Tailwind, and code Playground

by tin nguyen

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: 600px; 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 total = data.map(function(el){return el.y;})
  								.reduce(function(p,c){
                    return p+c;
                  });
  var newData = data.map(function(el){
  	el.count = el.y;
		el.y = el.y*100/total;
    return el;
  });
  data = newData;
  
  var start = -90;
  var series = [];
  for (var i = 0; i < data.length; i++) {
    var end = start + 360 * data[i].y / 100;
    series.push({
      name:"Count",
      type: 'pie',
      size: 200,
      dataLabels: {
      	distance: data[i].y > 20 ? -30 : 30,
      },
      startAngle: start,
      endAngle: end,
      data: [data[i]]
    });
    start = end;
  };
  console.log(series);
  $('#container').highcharts({
    series: series
  });
});