Search code examples
chartsflotstacked-area-chart

Flot: Stacked line chart bug - points get overlapped

When creating an area chart (stack + fill for line chart), points are overlapped with fill color.

I have created an example to demonstrate this bug: http://jsfiddle.net/d3bpD/

Flot chart options:

var options = {
    series: { stack: true },
    lines: {
        fill: 1,
        show: true
    },
    points: { show: true }
};

What could be a possible workaround for this?

Solution

  • Looks like a bug in how flot fills with the stack plugin. The only quick fix I can think of without digging into the source is to replicate the data into two series for each set of data. The first draws the lines and fill, the second just the points on top:

    someData = [[1, 3],
            [2, 16],
            [3, 3],
            [4, 3],
            [5, 8],
            [6, 12],
            [7, 3]];

var dataset = [
    {color: "#edc240", data: someData, stack: 1, lines: {fill: 1, show: true}, points: {show: false}}, 
    {color: "#afd8f8", data: someData, stack: 1, lines: {fill: 1, show: true}, points: {show: false}},
    {color: "#cb4b4b", data: someData, stack: 1, lines: {fill: 1, show: true}, points: {show: false}},
    {color: "#4da74d", data: someData, stack: 1, lines: {fill: 1, show: true}, points: {show: false}},
    {color: "#edc240", data: someData, stack: 2, lines: {show: false}, points: {show: true}}, 
    {color: "#afd8f8", data: someData, stack: 2, lines: {show: false}, points: {show: true}},
    {color: "#cb4b4b", data: someData, stack: 2, lines: {show: false}, points: {show: true}},
    {color: "#4da74d", data: someData, stack: 2, lines: {show: false}, points: {show: true}}
];

$.plot("#flot", dataset, {});

    Fiddle here.

    Produces:

    enter image description here