Search code snippets, questions, articles... Chrome Extension

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"]
            }]
        }
    });
});
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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?
0 Comments
Join Devsheet Ask a Question