question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:7
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

0reactions
etimbergcommented, May 29, 2020

There is a plugin that supports this https://github.com/sgratzl/chartjs-plugin-hierarchical

Read more comments on GitHub >

github_iconTop Results From Across the Web

Multi-level Category Axis: How to Add It to JS Chart
Axes work with scales and essentially visualize them. So in order to implement the idea, we'll need a custom scale containing data about ......
Read more >
A Complete Guide to Grouped Bar Charts
A grouped bar chart (aka clustered bar chart, multi-series bar chart) extends the bar chart, plotting numeric values for levels of two categorical...
Read more >
Chartjs 2: Multi level/hierarchical category axis in chartjs
My problem is not having multiple data sets. My problem is displaying an axis with hierarchical categories. The JsFiddle try to achieve this ......
Read more >
Improving Chart Readability and Data Analysis with Axis ...
This grouping or hierarchy of data can be at single or multiple levels based on the needs and the usage of the application....
Read more >
Chart Library With Multiple Levels Of Nested Axis Labels
[FEATURE] Support multilevel a.k.a hierarchical category axis # With current version of chartjs we have to flatten the hierarchy and have category labels ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found