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.

Stacked Chart not working with Category Axis

See original GitHub issue

Stacked 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:

  1. Include the jquery.flot.categories.js script.
  2. Set the X axis to be a category axis:
                xaxis: {
                    mode: 'categories'
                },
  1. 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:open
  • Created 10 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
brianpeiriscommented, Oct 5, 2013

Make sure you load the stack plugin after you load the categories plugin. http://jsfiddle.net/brianpeiris/uQjYe/

0reactions
shumailabatoolcommented, May 24, 2019

Make sure you load the stack plugin after you load the categories plugin. http://jsfiddle.net/brianpeiris/uQjYe/

Thanks a lot,resolved my issue

Read more comments on GitHub >

github_iconTop 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 >

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