Highcharts Grouped Categories
+ +A Highcharts plugin that allows you to add multi-level categories to your axes.
+ + + +Requirements
+-
+
- For Highcharts version >= 9.1.0 the plugin needs to be in version >= 1.2.0 +
- For Highcharts version >= 10.0.0 the plugin needs to be in version >= 1.3.0 +
- For Highcharts version >= 11.0.0 the plugin needs to be in version >= 1.3.1 +
- For Highcharts version >= 11.1.0 the plugin needs to be in version >= 1.3.2 +
Installation
+ +Through <script> tag
+ Like any other Highcharts module (e.g. exporting), add tag pointing to
+ grouped-categories.js below the Highcharts script tag.
+
<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://your-link.com/your-scripts/grouped-categories.js"></script>
+Please note that you have to host this JavaScript file yourself. For + development/testing purposes, you can use the + https://blacklabel.github.io/grouped_categories/grouped-categories.js + but for production, you should host it yourself as we do not provide this file from any CDN. This file is + available on our + GitHub repository. +
+ +With npm
+Firstly, install the package:
+npm i highcharts-grouped-categories
+And apply the module in your code where you import Highcharts: +
import Highcharts from 'highcharts';
+import GroupedCategoriesModule from 'highcharts-grouped-categories';
+
+GroupedCategoriesModule(Highcharts);
+
+// or, if you use require
+// require('highcharts-grouped-categories')(Highcharts);
+Usage and demos
+ +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"]
+ }]
+ }]
+}
+Code
+ +The latest code is available on our Github + repository. Look for the grouped_categories.js file which contains the entire module. +
+Demo
+ +All the source code for this documentation page is available on our Github + repository. in the /docs directory
+ +Here's a link to a + demo in JSFiddle. +
+