I've created a Flot stacked bar chart but the blocks don't appear to be stacking - they all start at 0 (at the bottom of the chart).

The values of the 4 blocks are:

• Bright green - 1
• Purple - 28
• Red - 83
• Light green - 195

If it was stacked correctly it should be at a height of 307. Any thoughts on what's wrong?

   drawLineChart: function(el,data,ticks,labelstr) {
      var plot = $.plot(el, data, {
        series: {stack: true,
             lines: {show: false, steps: false},
             bars: {show: true, barWidth: 0.4, align: 'center'}
        },
        xaxis: {
            ticks: ticks
        },
        yaxis: {
            min: 0,
        },
        grid: {
            color: '#aaa',
            borderWidth:0,
            axisMargin:0,
            hoverable: true,
            autoHighlight: false
        },
        legend: {
            show: true,
            position: "ne",
            noColumns: 1
        }
      });
   }

I've created a Flot stacked bar chart but the blocks don't appear to be stacking - they all start at 0 (at the bottom of the chart).

The values of the 4 blocks are:

• Bright green - 1
• Purple - 28
• Red - 83
• Light green - 195

If it was stacked correctly it should be at a height of 307. Any thoughts on what's wrong?

   drawLineChart: function(el,data,ticks,labelstr) {
      var plot = $.plot(el, data, {
        series: {stack: true,
             lines: {show: false, steps: false},
             bars: {show: true, barWidth: 0.4, align: 'center'}
        },
        xaxis: {
            ticks: ticks
        },
        yaxis: {
            min: 0,
        },
        grid: {
            color: '#aaa',
            borderWidth:0,
            axisMargin:0,
            hoverable: true,
            autoHighlight: false
        },
        legend: {
            show: true,
            position: "ne",
            noColumns: 1
        }
      });
   }

• javascript
• flot

2 Answers 2

The most likely problem is that you haven't included the stack plugin after flot. In your head tag, you should have something like this:

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.stack.js"></script>

The key in this case being that last script tag.

Beyond that, I'm not sure what the problem would be - I ran your options and everything looked fine. See it in action here.

I ran into the same issue with Flot and trying to display stacked bar charts. I found that in my case it was caused by the series not being sorted by Date ascending.

After sorting by Date ascending the series started stacking properly.

I've also run into the same situation as you when there are negative values that need to be stacked. This is not supported by the native stack plugin. You can look here for an alternative plugin for stacking negative values in a bar chart