[FEATURE] Support multi-level (a.k.a hierarchical) category axis
See original GitHub issueExpected Behavior
Add support for displaying hierarchical categories. An example of hierarchical category could be: Country > City e.g:
- USA
- New York
- San Francisco
- Canada
- Toronto
- Vancouver
When displaying such hiearchical category on an axis it is interesting to display the axis similarly to what MS Excel does See https://i.stack.imgur.com/CYp8Y.jpg for instance.
Current Behavior
With current version of chartjs we have to flatten the hierarchy and have category labels like this:
- USA - New York
- USA - San Francisco
- Canada - Toronto
- Canada - Vancouver
The problems with that solution is that:
- there is a lot of repetition in the axis so this uses more space to display
- repetition also prevents user from quickly identify the hierarchical nature of the categories.
Possible Solution
This could be implemented either by supporting this in the existing category axis or by having a dedicated axis. To support this the configuration API could be modified to support hierarchical labels. A label would be either a simple string or to supported child categories an object with label and children properties. e.g.
xAxes: [{
type: 'category',
labels: [
{ label: 'USA', children: ['New York', 'San Francisco']},
{ label: 'Canada', children: ['Toronto', 'Vancouver']}],
}]
## Context I originally posted a question on stack overflow for that and some additional context can be found there if needed.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:7
- Comments:11 (4 by maintainers)
our implementation: https://github.com/datavisyn/chartjs-scale-hierarchical
see also https://codepen.io/sgratzl/pen/vrVXae
There is a plugin that supports this https://github.com/sgratzl/chartjs-plugin-hierarchical