Flot stacked bar chart not stacking

Question

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).

Flot 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
        }
      });
   }

Ryley Ryley · Accepted Answer · 2012-09-04T15:53:22

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.

Flot stacked bar chart not stacking

2 Answers