JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/data.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>
  <script src="http://code.highcharts.com/highcharts-more.js"></script>

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

<table id="datatable" style="visibility: hidden; display: none">
  <thead>
    <tr>
    <th>Cluster</th>
    <th>Self</th>
    <th>Supervisor</th>
    <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Comms</th>
      <td>30</td>
      <td>40</td>
      <td>70</td>
    </tr>
    <tr>
      <th>Perf</th>
      <td>20</td>
      <td>60</td>
      <td>80</td>
    </tr>
    <tr>
      <th>Maint</th>
      <td>30</td>
      <td>40</td>
      <td>70</td>
    </tr>
    <tr>
      <th>Ops</th>
      <td>20</td>
      <td>60</td>
      <td>0</td>
    </tr>    
  </tbody>
</table>

JavaScript

$(function () {
      $('#container').highcharts({
          data: {
              table: document.getElementById('datatable')
          },
          chart: {
              type: 'bar'
          },
          title: {
              text: 'Trying to put labels into bar'
          },
          yAxis: {
              allowDecimals: false,
              min: 0,
              max: 100,
              title: {
                  text: 'Percentage'
              }
          },
          plotOptions: {
              bar: {
                  grouping: true,                  
                  groupPadding:0.1,
                  pointWidth:50,
                  pointPadding: 0,
                  dataLabels: {
                      enabled: true,
                      inside:true,
                      useHTML: true,
                      align: 'center',
                      color: 'white',
                      style: {
                          fontWeight: 'bold'
                      },                      
                      verticalAlign: 'middle',
                      formatter: function () {
                          if (this.series.name) 
                            return '<span style="color:black">' + this.series.name + ' = ' + this.y + ' %</span>';
                          else return '';
                      }
                  }
              }
          },          
          tooltip: {
              formatter: function () {
                  return '<b>' + this.series.name + '</b><br/>' +
                      this.point.y + ' ' + this.point.name.toLowerCase();
              }
          }
      });
  });