Flot Chart - Different line and point colors depending on data

flot, jquery

Solution

The easiest way to obtain the look you are after is to drop the thresholding plugin and split it into two series:

[{
    data: [[0,0],[5,1],[7,0]],
    color: "#83ce16",
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    },
    points: {
        show: true,
        fillColor: '#83ce16'
    }
},{                           
    data: [[7,0],[11,-1],[11,0]],
    color: "#c00000",
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    },
    points: {
        show: true,
        fillColor: '#c00000'
    }
}],

Fiddle here.

Problem

I have a line chart for dis/likes. The positive values should get a darker green border and the red values a darker red border. Further the red points should be filled with red color, not with green. This is how it looks like! This is how it should look like After a few hours I couldnt get any solution on this, so any help is welcome. Here's the code I have: ``` $.plot("#curvePlaceholder", [{ data: data, color: "#83ce16", threshold: { below: 0, color: "#c00000" }, lines: { fill: true, lineWidth: 3, fillColor: { colors: [{ opacity: 1 }, { opacity: 1 } ] } } }], { series: { lines: { show: true, fill: true }, points: { show: true, fillColor: '#83ce16' } }, grid: { hoverable: true, clickable: true, backgroundColor: 'transparent', color: 'transparent', show: true, markings: [ { yaxis: { from: 0, to: 0 }, color: "#737374"} ], markingsLineWidth: 6 }, yaxis: { show: false, <?=$chart_data['ymin'];?> <?=$chart_data['ymax'];?> }, xaxis: { show: false, min: -0.4 } }); ```

Original source