JSFiddle - React, Tailwind, and code Playground

by wergeld

HTML

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

<div id="container" style="height: 400px"></div>
<button id="button">Add point</button>

JavaScript

$(function() {
  getColor = function(val) {
    if (val >= 50) {
      return 'red'
    } else {
      return 'blue'
    }
  }
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      plotBackgroundColor: '#323f48',
      plotBorderColor: '#323f48',
      plotBorderWidth: 0,
      plotShadow: false,
      backgroundColor: '#323f48',
      borderColor: '#323f48'
    },
    title: {
      text: 'CHART<br/><span class="white">sub-header</span>',
      align: 'center',
      verticalAlign: 'middle',
      y: -3,
      style: {
        fontWeight: 'bold',
        color: 'white',
        fontSize: '10px'
      }
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {

        dataLabels: {
          enabled: true,
          distance: -510,
          style: {
            fontWeight: 'bold',
            color: '#323f48'
          }
        },
        startAngle: -180,
        endAngle: 180,
        center: ['50%', '50%'],
        animation: false,
        borderColor: '#323f48',
        borderWidth: '0px'
      }
    },
    series: [{
      type: 'pie',
      name: 'days',
      innerSize: '90%',
      data: [{
        x: 'empty',
        y: 56.00,
        color: getColor(56.00)
      }, {
        x: 'days',
        y: 44.00,
        color: getColor(44.00)
      }]
    }],
  });


});