Stacked Chart not working with Category Axis
See original GitHub issueStacked charts seem to work fine until used with a category axis. When using a category axis, they are simply overlayed on top of each other.
This can easily be demonstrated using the Stacked Chart Example (http://www.flotcharts.org/flot/examples/stacking/index.html) and making some minor modifications:
- Include the jquery.flot.categories.js script.
- Set the X axis to be a category axis:
xaxis: {
mode: 'categories'
},
- Change the data point generation code to generate categories for the x axis instead of numbers:
var alph = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([alph[i], 1]);
}
var d2 = [];
for (var i = 0; i <= 10; i += 1) {
d2.push([alph[i], 2]);
}
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([alph[i], 3]);
}
That’s it!
FYI, I was able to work around this by adding the denoted lines to jquery.flot.stack.js. I know that this is not the best solution, but at least it might help illustrate the issue:
// cases where we actually got two points
px = points[i + keyOffset];
py = points[i + accumulateOffset];
qx = otherpoints[j + keyOffset];
qy = otherpoints[j + accumulateOffset];
bottom = 0;
// ADDED START
if (s.xaxis.categories) {
px = s.xaxis.categories[px];
}
// ADDED END
if (px == qx) {
...
Issue Analytics
- State:
- Created 10 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
How to Make Excel Clustered Stacked Column Chart
In this chart: The sales data is grouped by region -- there is a single stacked column for each region, along the Category...
Read more >Fix Scale on 100% Stacked Bar Chart - Microsoft Community
Double-click any of the horizontal axis labels to activate the Format Axis pane. Under Axis options > Bounds, set the Minimum to 0....
Read more >A Complete Guide to Stacked Bar Charts | Tutorial by Chartio
Just like the standard bar chart, the bars in a stacked bar chart can be oriented horizontally (with primary categories on the vertical...
Read more >Stacked column chart not displaying all the Bars on X axis
For this scenario, you can consider changing the axis units and start/end ranges to show all the data bars at the same time....
Read more >Stacked Column Charts that Cross the X Axis - Peltier Tech
Stacked column and stacked bar charts are handy chart types. And with invisible columns (no border and no fill in the column), you...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Make sure you load the stack plugin after you load the categories plugin. http://jsfiddle.net/brianpeiris/uQjYe/
Thanks a lot,resolved my issue