JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="Acats" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
   $ ('#Acats').highcharts ({
    chart: {
      type: 'column'
    },
    title: {
      text: 'ACATS - OCC Non Net'
    },
    xAxis: {
      categories: ['06 ACAT', '07 ACAT', '06 CNS', '08 CNS','08 BO','OCC']
    },
    yAxis: {min: 0 /*,
      labels: {
        formatter: function () {
          return this.value / 1000000000 + 'B';
        }
      }*/
    },
    exporting: {
      enabled: false
    },
    tooltip: {formatter: function(){
        return 'the value here is ' + this.y + this.Credit
        + ' bye';
    }

    },
    series: [
      {
        name: 'Amount',
        data: [22000, 21000, 19000,4000,27000,1000],
        Credit:[22001, 21001, 19001,4001,27001,1001],
        Debit:  [22002, 21002, 19002,4002,27002,1002]
      }
    ]
  });

});