Highcharts plugin to add grouped categories to charts.
npm install highcharts-grouped-categories
>= 9.1.0 the plugin needs to be in version >= 1.2.0
>= 10.0.0 the plugin needs to be in version >= 1.3.0
>= 11.0.0 the plugin needs to be in version >= 1.3.1
>= 11.1.0 the plugin needs to be in version >= 1.3.3
tag pointing to grouped-categories.js below Highcharts script tag.
var Highcharts = require('highcharts'),
HighchartsGroupedCategories = require('grouped-categories')(Highcharts);
`
* For BOWER users:
`
bower install highcharts-grouped-categories
`
$3
It's quite simple and intuitive, just pass object as category:
`
xAxis: {
categories: [{
name: "Fruit",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato", "Tomato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon", "Tuna"]
}]
}
`
You can also define more category levels:
`
xAxis: {
categories: [{
name: "America",
categories: [{
name: "USA",
categories: ["New York", "San Francisco"]
}, {
name: "Canada",
categories: ["Toronto", "Vancouver"]
}, {
name: "Mexico",
categories: ["Acapulco", "Leon"]
}]
}, {
name: "Europe",
categories: [{
name: "United Kingdom",
categories: ["London", "Liverpool"]
}, {
name: "France",
categories: ["Paris", "Marseille"]
}, {
name: "Germany",
categories: ["Berlin", "Munich"]
}]
}]
}
`
For each level you can define subset of styling options. 0-level categories are based on the default Highcharts options.
`
xAxis: {
labels: {
groupedOptions: [{
style: {
color: 'red' // set red font for labels in 1st-Level
}
}, {
rotation: -45, // rotate labels for a 2nd-level
align: 'right'
}],
rotation: 0 // 0-level options aren't changed, use them as always
},
categories: [{
name: "America",
categories: [{
name: "USA",
categories: ["New York", "San Francisco"]
}, {
name: "Canada",
categories: ["Toronto", "Vancouver"]
}, {
name: "Mexico",
categories: ["Acapulco", "Leon"]
}]
}, {
name: "Europe",
categories: [{
name: "United Kingdom",
categories: ["London", "Liverpool"]
}, {
name: "France",
categories: ["Paris", "Marseille"]
}, {
name: "Germany",
categories: ["Berlin", "Munich"]
}]
}]
}
``