JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="chart"></div>

JavaScript

$(function() {
  Highcharts.chart('chart', {

    chart: {
      type: 'column',
       events: {
                load: function (event) {
                    var cats = this.xAxis[0].categories;
                    var theData = this.series;
                    var newCats = [];
                    debugger;
                    for (var i = 0; i < theData.length; i++) {
                        newCats.push(theData[i].name)           
                    }
 
                    this.xAxis[0].setCategories(newCats);
                }
            }
    },

    title: {
      text: 'Custom Category Labels'
    },

    xAxis: {
      categories: ['7789 - 70', '7877 - 12', '7876 - 12', '7876 - 7', '7877 - 7'],
      labels: {
        formatter: function() {
         
        }
      }
    },

    yAxis: {
      allowDecimals: false,
      min: 0,
      title: {
        text: 'Number of Leads'
      }
    },

    tooltip: {
      formatter: function() {
        var s = [];

        $.each(this.points, function(i, point) {
          s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : ' +
            point.y + '<span>');
        });

        return s.join(' and ');
      },
      shared: true
    },

    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },

    series: [{
      name: 'LEADS',
      data: [185, 175, 160, 145, 120],
      stack: '1',
    }, {
      name: 'DUPLICATES',
      data: [10, 170, 110, 50, 1],
      stack: '2',
    }, {
      name: 'OTHERS',
      data: [100, 0, 4, 65, 100],
      stack: '2',
    }, {
      name: 'FILTER ISSUE',
      data: [3, 0, 4, 4, 3],
      stack: '2',
    }]
  });
});