Go to project page to see this module in action: http://blacklabel.github.io/grouped_categories/
- Plugin requires the latest Highcharts (tested with 2.3.5)
-
Like any other Highcharts module (e.g. exporting), add
<script>tag pointing togrouped-categories.jsbelow Highcharts script tag. -
For NPM users:
var Highcharts = require('highcharts'),
HighchartsMulticolor = require('multicolor_series')(Highcharts);
- For BOWER users:
bower install highcharts-grouped-categories
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"]
}]
}]
}
The latest code is available on github: https://github.com/blacklabel/grouped_categories/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent