Group stacked bar charts (#2643) #3563
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <!doctype html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <title>Stacked Bar Chart with Groups</title> | ||
| <script src="../../dist/Chart.bundle.js"></script> | ||
| <script src="../utils.js"></script> | ||
| <style> | ||
| canvas { | ||
| -moz-user-select: none; | ||
| -webkit-user-select: none; | ||
| -ms-user-select: none; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div style="width: 75%"> | ||
| <canvas id="canvas"></canvas> | ||
| </div> | ||
| <button id="randomizeData">Randomize Data</button> | ||
| <script> | ||
| var barChartData = { | ||
| labels: ["January", "February", "March", "April", "May", "June", "July"], | ||
| datasets: [{ | ||
| label: 'Dataset 1', | ||
| backgroundColor: window.chartColors.red, | ||
| stack: 'Stack 0', | ||
| data: [ | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor() | ||
| ] | ||
| }, { | ||
| label: 'Dataset 2', | ||
| backgroundColor: window.chartColors.blue, | ||
| stack: 'Stack 0', | ||
| data: [ | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor() | ||
| ] | ||
| }, { | ||
| label: 'Dataset 3', | ||
| backgroundColor: window.chartColors.green, | ||
| stack: 'Stack 1', | ||
| data: [ | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor(), | ||
| randomScalingFactor() | ||
| ] | ||
| }] | ||
|
|
||
| }; | ||
| window.onload = function() { | ||
| var ctx = document.getElementById("canvas").getContext("2d"); | ||
| window.myBar = new Chart(ctx, { | ||
| type: 'bar', | ||
| data: barChartData, | ||
| options: { | ||
| title:{ | ||
| display:true, | ||
| text:"Chart.js Bar Chart - Stacked" | ||
| }, | ||
| tooltips: { | ||
| mode: 'index', | ||
| intersect: false | ||
| }, | ||
| responsive: true, | ||
| scales: { | ||
| xAxes: [{ | ||
| stacked: true, | ||
| }], | ||
| yAxes: [{ | ||
| stacked: true | ||
| }] | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| document.getElementById('randomizeData').addEventListener('click', function() { | ||
| barChartData.datasets.forEach(function(dataset, i) { | ||
| dataset.data = dataset.data.map(function() { | ||
| return randomScalingFactor(); | ||
| }); | ||
| }); | ||
| window.myBar.update(); | ||
| }); | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is
Stringthe best type for this? Would a number make more sense?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think
Stringis the best, because it serves as the name of the stack. For instance, here's chadcodes' image from the related issueAlso a number would imply an order (confusing if Dataset1 and 2 are in stack
2and Dataset 3 is in stack1)On a slightly related note - do you think
stackis a generic enough property name, or would something likegroup(orcluster) be better?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that's a good call then. You're right that the numbers could imply an order to the stacks.
I think
stackis ok. Maybe @simonbrunel has some thoughts on thisThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was thinking
groupfirst, but finallystackmight be better. Can we explicitly document thisdataset.stackas an ID and not a name to avoid any confusion with label/text/title?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After I chose
stack, I was worried that it would be very bar specific (just in case we want to use the same property for grouping datasets for other chart types) + we are calling it grouped stacked bars. But I'll go with whatever you suggest (I've being going back and forth between them that they both seem logical - I'll have good things to say aboutstackonce we've changed togroup:-))You mean call it stackID (like we do with axisIDs) and point to options (in future) for name, styling? Or do you mean just change
For grouping stacked barstoID for grouping stacked bars? Should be simple enough either way.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I mean simply change the documentation:
identifier to group bars in stack(s)(or similar) but keep the property name simple:stack. About thestack vs group,groupwould make sense if this concept could be implemented for every types of chart, which I'm not sure it's possible, right?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok done!
I was thinking about folks who extend Chart.js to add other chart types (outside of the core library). If we call this
stack, they may be tempted to add / use a new property that's better suited to their chart type.A convoluted example would be a grouped scatter plot (with pie charts instead of dots).
stackfeels out of place,groupmight be ok.