JSFiddle - React, Tailwind, and code Playground

HTML

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

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

JavaScript

$(function() {


  var renderController = function(chart) {
    var chart = this,
      renderer = chart.renderer,
      seriesController = chart.options.seriesController,
      length = seriesController.data.length,
      plotWidth = chart.plotWidth,
      marginLeft = chart.marginLeft,
      width = chart.plotWidth / length,
      generalStatus = 'ok',
      color;
    $('.controler').remove();
    Highcharts.each(seriesController.data, function(c, i) {
      if (c.status === 'ok') {
        color = '#119001';
      } else if (c.status === 'alert') {
        color = 'yellow';
        generalStatus = 'alert';
      } else {
        color = 'red';
        generalStatus = 'danger';
      }
      renderer.circle(width * i + (width / 2), 100, width / 2).attr({
        fill: color,
        'stroke-width': 1,
        stroke: 'blue'
      }).addClass('controler').add();
      renderer.label(c.standard, width * i + (width / 2) - 2, 90).attr({
        'text-anchor': 'middle'
      }).addClass('controler').add();
    });
    color = generalStatus === 'ok' ? '#119001' : (generalStatus === 'alert' ? 'yellow' : 'red');
    renderer.circle(plotWidth / 2, 300, width / 2).attr({
      fill: color,
      'stroke-width': 1,
      stroke: 'blue'
    }).addClass('controler').add();
    renderer.label('General', plotWidth / 2 - 2, 290).attr({
      'text-anchor': 'middle'
    }).addClass('controler').add();
  };



  $('#container').highcharts({
    chart: {
      backgroundColor: 'white',
      events: {
        load: renderController,
        redraw: renderController
      }
    },
    seriesController: {
      data: [{
        standard: 'CORP',
        status: 'ok'
      }, {
        standard: 'IEEE',
        status: 'ok'
      }, {
        standard: 'IEC',
        status: 'alert'
      }, {
        standard: 'PTX',
        status: 'ok'
      }, {
        standard: 'ABN',
        status: 'ok'
      }, {
        standard: 'NEI',
        status: 'danger'
      }]
    },
    title:...