Section wise labeling in highchart

Question

I'm making a graph with multiple y-axis using this Highchart but i'm stuck while making multiple labels for x-axis. currently i reached on this

Highcharts.chart('container', {
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Average Week Comparison'
    },
    subtitle: {
        text: 'Values: Wastage and OEE'
    },
    xAxis: [{
        categories: days.reverse(),
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}%',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'OEE',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: 'Waste',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} %',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 100,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{
        name: 'OEE',
        type: 'column',
        yAxis: 1,
        data: oee.reverse(),
        tooltip: {
            valueSuffix: ' %'
        }

    }, {
        name: 'Waste',
        type: 'spline',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5],
        tooltip: {
            valueSuffix: ' %'
        }
    }]
});

current output is this where i manipulated x and y axis dynamically.

Now i want to add sections on x-axis values in 3 value chunks below is the relevant graph(not actual)

I'm not good at JS can anyone help me to figure out whether it is possible to print x-axis in sections like above image. Your help will be highly push me to solve this problem. Also if any other library can do it? you can mention its link.

Answer 1

You can use 'grouped-categories.js' plugin.

    xAxis: {
        categories: [{
            name: "Fruit",
            categories: ["Apple", "Banana", "Orange"]
        }, {
            name: "Vegetable",
            categories: ["Carrot", "Potato", "Tomato"]
        }, {
            name: "Fish",
            categories: ["Cod", "Salmon", "Tuna"]
        }]
    }

Live demo: https://jsfiddle.net/BlackLabel/TFhd7/

Docs: http://blacklabel.github.io/grouped_categories/