1 |
|
2 | # Grouped Categories - Highcharts module
|
3 |
|
4 | Go to project page to see this module in action: [http://blacklabel.github.io/grouped_categories/](http://blacklabel.github.io/grouped_categories/)
|
5 |
|
6 | ### Requirements
|
7 |
|
8 | * Plugin requires the latest Highcharts (tested with 2.3.5)
|
9 |
|
10 | ### Installation
|
11 |
|
12 | * Like any other Highcharts module (e.g. exporting), add `<script>` tag pointing to `grouped-categories.js` below Highcharts script tag.
|
13 |
|
14 | * For NPM users:
|
15 | ```
|
16 | var Highcharts = require('highcharts'),
|
17 | HighchartsGroupedCategories = require('grouped-categories')(Highcharts);
|
18 | ```
|
19 |
|
20 | * For BOWER users:
|
21 |
|
22 | ```
|
23 | bower install highcharts-grouped-categories
|
24 | ```
|
25 |
|
26 | ### Usage and demos
|
27 |
|
28 | It's quite simple and intuitive, just pass object as category:
|
29 |
|
30 | ```
|
31 | xAxis: {
|
32 | categories: [{
|
33 | name: "Fruit",
|
34 | categories: ["Apple", "Banana", "Orange"]
|
35 | }, {
|
36 | name: "Vegetable",
|
37 | categories: ["Carrot", "Potato", "Tomato"]
|
38 | }, {
|
39 | name: "Fish",
|
40 | categories: ["Cod", "Salmon", "Tuna"]
|
41 | }]
|
42 | }
|
43 | ```
|
44 |
|
45 | You can also define more category levels:
|
46 |
|
47 | ```
|
48 | xAxis: {
|
49 | categories: [{
|
50 | name: "America",
|
51 | categories: [{
|
52 | name: "USA",
|
53 | categories: ["New York", "San Francisco"]
|
54 | }, {
|
55 | name: "Canada",
|
56 | categories: ["Toronto", "Vancouver"]
|
57 | }, {
|
58 | name: "Mexico",
|
59 | categories: ["Acapulco", "Leon"]
|
60 | }]
|
61 | }, {
|
62 | name: "Europe",
|
63 | categories: [{
|
64 | name: "United Kingdom",
|
65 | categories: ["London", "Liverpool"]
|
66 | }, {
|
67 | name: "France",
|
68 | categories: ["Paris", "Marseille"]
|
69 | }, {
|
70 | name: "Germany",
|
71 | categories: ["Berlin", "Munich"]
|
72 | }]
|
73 | }]
|
74 | }
|
75 | ```
|
76 |
|
77 | For each level you can define subset of styling options. 0-level categories are based on the default Highcharts options.
|
78 |
|
79 | ```
|
80 | xAxis: {
|
81 | labels: {
|
82 | groupedOptions: [{
|
83 | style: {
|
84 | color: 'red' // set red font for labels in 1st-Level
|
85 | }
|
86 | }, {
|
87 | rotation: -45, // rotate labels for a 2nd-level
|
88 | align: 'right'
|
89 | }],
|
90 | rotation: 0 // 0-level options aren't changed, use them as always
|
91 | },
|
92 | categories: [{
|
93 | name: "America",
|
94 | categories: [{
|
95 | name: "USA",
|
96 | categories: ["New York", "San Francisco"]
|
97 | }, {
|
98 | name: "Canada",
|
99 | categories: ["Toronto", "Vancouver"]
|
100 | }, {
|
101 | name: "Mexico",
|
102 | categories: ["Acapulco", "Leon"]
|
103 | }]
|
104 | }, {
|
105 | name: "Europe",
|
106 | categories: [{
|
107 | name: "United Kingdom",
|
108 | categories: ["London", "Liverpool"]
|
109 | }, {
|
110 | name: "France",
|
111 | categories: ["Paris", "Marseille"]
|
112 | }, {
|
113 | name: "Germany",
|
114 | categories: ["Berlin", "Munich"]
|
115 | }]
|
116 | }]
|
117 | }
|
118 | ```
|
119 |
|
120 | ### Code
|
121 |
|
122 | The latest code is available on github: [https://github.com/blacklabel/grouped_categories/](https://github.com/blacklabel/grouped_categories/)
|