JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

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

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

JavaScript

const chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this,
          yAxis = chart.yAxis[0],
          lastTick = yAxis.tickPositions[yAxis.tickPositions.length - 1],
          suffix = yAxis.ticks[lastTick].label.textStr.substr(-1, 1);
        yAxis.update({
          title: {
            text: 'Revenue [' + suffix + ' €]'
          }
        })
      }
    }
  },
  yAxis: {
    lineWidth: 1,
    tickWidth: 1,
    title: {
      align: 'high',
      offset: 0,
      rotation: 0,
      y: -10
    },
    labels: {
      formatter: function() {
        var label = this.axis.defaultLabelFormatter.call(this);
        if (/^[0-9]{4}$/.test(label)) {
          return Highcharts.numberFormat(this.value, 0);
        }
        return label;
      }
    }
  },
  series: [{
    data: [290000000000.09, 710000000000.5, 106000000000.4, 120000000009.2, 100000000044.0]
  }]
});