JSFiddle - React, Tailwind, and code Playground

by Arvind Pal

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<div id="container" style="height: 400px; width: 400px"></div>

CSS

.highcharts-xaxis-labels {
    word-break: break-all;
}

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "column"
        },
        title: {
            text: null
        },
        series: [{
            data: [4, 14, 18, null, 5, 6, 5, null, 14, 15, 18]
        }],
        plotOptions: {
            column: {
                //grouping: false,
                color: 'blue'
            },
            series: {
                pointPadding: 0,
                groupPadding: 0.1
            }
        },
        xAxis: {
            labels:{
                maxStaggerLines: 1,
                useHTML:true,
                
            },
            categories: [{
                name: "FruitFruitFruitFruitFruit",
                categories: ["Apples", "Bananas", "Oranges"]
            }, {
                name: ' ',
                categories: [' ']
            }, {
                name: "Vegetable",
                categories: ["Carrots", "Potatos", "Tomatoes"]
            }, {
                name: ' ',
                categories: [' ']
            }, {
                name: "Fish",
                categories: ["Cod", "Salmon", "Tuna"]
            }]
        }
    });
});