Create groups or categorize the axis points of highcharts.js

The additional plugin can be used to group or categorize axis points of highcharts. You need to import grouped-categories.js along with highcharts library to make it work

$(function () {

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "column"
        },
        title: {
            useHTML: true,
            x: -10,
            y: 8,
            text: '<span class="chart-title"> Grouped categories <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
        },
        series: [{
            data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
        }],
        xAxis: {
            categories: [{
                name: "Fruit",
                categories: ["Apple", "Banana", "Orange"]
            }, {
                name: "Vegetable",
                categories: ["Carrot", "Potato", "Tomato"]
            }, {
                name: "Fish",
                categories: ["Cod", "Salmon", "Tuna"]
            }]
        }
    });
});

Categorize axis points of highchairs can be done using additional plugin. You need to import the additional JS file into your project to make it work. Below is the live demo for that.

Was this helpful?