JSFiddle - React, Tailwind, and code Playground

by yasemin Cerrahoğlu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" class="feedkitchenChart" style=" height: 170px; margin: 0 auto"></div>

CSS

.feedkitchenChart .highcharts-color-1 {
  fill: #e5e5e5
}

JavaScript

$('.feedkitchenChart').each(function() {
  var data1 = Math.floor((Math.random() * 23) + 1);
  var data2 = 24 - data1;
  var chart_time = new Highcharts.Chart({
    chart: {
      renderTo: this,
      type: 'pie',
      margin:0,
      //height: "100%",
    },
    plotOptions: {
      pie: {
        slicedOffset: 0,
        size: '100%',
        dataLabels: {
          enabled: false,
        }
      },
    },
    tooltip: {
      enabled: false,
    },
    title: {
      useHTML: true,
      text: "chartTitle",
      align: 'center',
      verticalAlign: 'middle',
      style: {
        fontSize: '14px',
        fontWeight: 'bold',
      }
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'hours',
      data: [data1, data2],
      zones: [{
        value: 8,
        color: 'red',
      }, {
        value: 12,
        color: 'orange'
      }, {
        value: 24,
        color: 'green'
      }],
      innerSize: '60%',
      showInLegend: false,
      dataLabels: {
        enabled: false
      },
      states: {
        hover: {
          enabled: false
        }
      }
    }]
  });
  chart_time.update({
    title: {
      text: chart_time.options.series[0].data[0] + ' hrs'
    },

  });
})