Flot: combine stacked bars and line in one chart

Question

I'm trying to combine stacked bars and a line chart in one flot plot.

The problem I'm facing is, that the line data also gets stacked. Which means the data for the first point (line.data[0]) will be plotted as 15 but I would like it to be 5.

Please see this jsfiddle: http://jsfiddle.net/derkinzi/eor5ngjd/

It works when setting stack: null but I need the stacks. Also giving the line it's own yaxis doesn't solve the problem. (change line 90 to: yaxis: 2)

How can I amend the code so line.data get's it's independent plotting with an independent yaxis?

Basically I need this but with stacked bars: http://jsfiddle.net/derkinzi/eor5ngjd/11/

This is my dataset:

var stack1 = {
    label: 'stack1',
    data: [
      [1, 6],
      [2, 3],
      [4, 5],
      [4, 3],
      [5, 4]
    ],
    bars: bar_options
  };
  var stack2 = {
    label: 'stack2',
    data: [
      [1, 4],
      [2, 4],
      [3, 4],
      [4, 4],
      [5, 4]
    ],
    bars: bar_options
  };
  var line = {
    label: 'line',
    data: [
      [1, 5],
      [2, 15],
      [3, 15],
      [4, 15],
      [5, 20]
    ],
    lines: line_options,
    yaxis: 1,
    points: {
      radius: 5,
      show: true
    },
  };
  var dataset = [stack1, stack2, line];

Raidri Raidri · Accepted Answer · 2017-07-03T15:09:44

As describes in the stack plugin, you can specify the stack option per data series, so in your case do this:

var stack1 = {
    //...
    stack: true,
};
var stack2 = {
    //...
    stack: true,
};
var line = {
    //...
    stack: false,
    //...
};

Also, when you define multiple axes, use the yaxes property, not yaxis.

Updated fiddle

Flot: combine stacked bars and line in one chart

1 Answers