-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FEATURE] Support multi-level (a.k.a hierarchical) category axis #4946
Comments
Hi, I started looking at how this could be implemented as a plug-in. However from what I see in the documentation and in the code the extension point documented for scale are not flexible enough to implement what I need. So the plug-in would need to re-implement lot of what is implemented in Chart.Scale like the draw method right? Also to get me started I copied the code from the core.category.js and registered it with an alternate name 'categoryHierarchical' however I didn't get the same rendering: the bars were not positioned between ticks but were centered on the ticks. However as soon as I renamed my category to 'category' the chart behaved properly so it seems that the type "category" has some hard coded behaviour attached to it side of the scale itself. Is there some way to fix this? |
@sarod that's correct about the drawing code. You'll need to re-implement a lot of the draw code since there is so much different between the axes. To see if there is any category axis hard codings I would try searching for |
@etimberg thanks for the answer. Regarding "category" specific behavior. e.g. defaults declaration from controller.bar.js defaults._set('bar', {
hover: {
mode: 'label'
},
scales: {
xAxes: [{
type: 'category',
// Specific to Bar Controller
categoryPercentage: 0.8,
barPercentage: 0.9,
// offset settings
offset: true,
// grid line settings
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
type: 'linear'
}]
}
}); Anyway this is certainly not blocking me from implementing the axis. So thanks again for the answer I'll try to wrap my head around the draw method logic. |
In terms of the category defaults from a chart default not merging, you might be hitting https://github.com/chartjs/Chart.js/blob/master/src/core/core.helpers.js#L51-L58 which was designed to prevent accidentally using the wrong settings if the axis type changes. Is there anything I can answer about the draw logic? |
Thanks for the pointer about settings merge. The draw method is a big piece so I'll need to find time to familiarize before I ask questions. I'll let you know. |
hey @sarod, |
@dav-sap, No I didn't make any progress so far. |
FYI I don't use chartjs anymore so I don't plan to work on this anymore. |
our implementation: https://github.com/datavisyn/chartjs-scale-hierarchical |
Just want to make a compliment,
|
There is a plugin that supports this https://github.com/sgratzl/chartjs-plugin-hierarchical |
Expected Behavior
Add support for displaying hierarchical categories.
An example of hierarchical category could be: Country > City
e.g:
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:
The problems with that solution is that:
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.
## Context
I originally posted a question on stack overflow for that and some additional context can be found there if needed.
The text was updated successfully, but these errors were encountered: