JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<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" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Stacked bar chart'
  },
  xAxis: {
    categories: ['Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    },
    /* stackLabels: {
        enabled: true,
    } */
  },
  legend: {
    reversed: true
  },
    plotOptions: {
      series: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          formatter: function() {
            console.log(this);
            return 'custom text here'
          }
        }
      }
    },
  series: [{
    name: 'John',
    data: [4726.78]
  }, {
    name: 'Brian',
    data: [4250.00],
  }]
});