[FEATURE] Support multi-level (a.k.a hierarchical) category axis

Expected 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.

Author: Fantashit

1 thought on “[FEATURE] Support multi-level (a.k.a hierarchical) category axis

Comments are closed.