Flot Charts. Custom color below x-axis value

Question

I have a Flot Bar Chart code.

$(function() {  
        var barOptions = {
            series: {
                bars: {
                    show: true,
                    barWidth: 0.4,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.8
                        }, {
                            opacity: 0.8
                        }]
                    }
                }
            },
            xaxis: {
                mode: "categories",
                tickLength: 0 
            },              
            yaxis: {
                min:-200, max: 200,  tickSize: 50,
            },
            colors: ["#1ab394"],
            grid: {
                color: "#999999",
                hoverable: true,
                clickable: true,
                tickColor: "#D4D4D4",
                borderWidth:0
            },
            legend: {
                show: false
            },
            tooltip: true,
            tooltipOpts: {
                content: "Cost: %y %"
            }
        };

        var barData = {
            label: "bar",
            data: [         
            ["First", -100],["Second", 66.67],["Third", -177.77],]

        };

        $.plot($("#flot-bar-chart"), [barData], barOptions);            

    });

I want that every bar below 0 would be specific (for example red) color. I have tried to do that with threshold plugin, but it adds additional values. Is there any solution to make it?

Answer 1

The threshold plugin should not add additional values, see this fiddle or the snippet below:

 $(function() { var barOptions = { series: { bars: { show: true, barWidth: 0.4, fill: true, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 0.8 }] }, align: 'center' } }, xaxis: { mode: "categories", tickLength: 0, ticks: [ [1, 'First'], [2, 'Second'], [3, 'Third'] ] }, yaxis: { min: -200, max: 200, tickSize: 50, }, colors: ["#1ab394"], grid: { color: "#999999", hoverable: true, clickable: true, tickColor: "#D4D4D4", borderWidth: 0 }, legend: { show: false }, tooltip: true, tooltipOpts: { content: "Cost: %y %" } }; var barData = { label: "bar", data: [ [1, -100], [2, 66.67], [3, -177.77], ], threshold: { below: 0, color: "rgb(200, 20, 30)" }, }; $.plot($("#flot-bar-chart"), [barData], barOptions); }); 

 #flot-bar-chart { height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.threshold.min.js"></script> <div id="flot-bar-chart"></div>