Flot Chart - Different line and point colors depending on data

Question

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

Answer 1

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.

Answer 2

If one is using a data array, you can also do this for example:

var dataset = [
    { label: "Success", data: convertedSuccessArray, points: { fillColor: "green" } },
    { label: "Failed", data: convertedFailedArray, points: { fillColor: "red" } }
];