How can I assign different color for a series in a bar chart with Flot Java Script library?

Question

I use Flot library for charting, I need to present a bars chart and there one special series which should be distinguished, giving it a certain color would be best option.

I've already did so in previous charts giving the color parameter to the series pushed to the data but it's not working here.

Bar for 21 should be in red and it's not.

First I tried the usual:

series.push({
                    color: 'anyHexColorCode',
                    data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})

In a loop I checked for the wished value and gave that a different color, same as I also do in the current function I got shown below.

This is how I'm sending to plot:

function plotInterpolacion(respuesta) {

    clearCharts()

    var series = []
    var colorsList = ['#8B0000','#FFA614']

    alert("La aproximación para x=" + $("#a").val() + " es igual a: " + respuesta['aproximacion'])

    var xs = Object.keys(respuesta['puntos']).sort().forEach(function (k,i) {

        if (k == respuesta['aproximacion']) {
            series.push({
                color: 0,
                data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
            })
        }
        else {
            series.push({
                color: 1,
                data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
            })
        }
    })

    $.plot($("#bars"), series, {

                                bars: {
                                            show:true,
                                            align: "center",
                                            barWidth: 0.6
                                }, 
                                xaxis: {
                                            mode: "categories", 
                                            tickLength:0
                                },
                                colors: colorsList
                                })

}

In that example, bar for 21 should be in red.

This is what respuesta['puntos'] looks like:

  "puntos": {
    "18.0": 79.0, 
    "17.8": 72.0, 
    "21.0": 184.0000000000009
  }

I have added jquery.colorhelpers.js flot plugin but it didn't make any difference.

Answer 1

The barWidth is expressed in axis units. So with a barWidth of 0.5, and only 0.2 x-units between the first and second bars, they will of course overlap.

A series can have only one color, and all of your bars are in the same series. If you want them to have different colors, split them into separate series.

Answer 2

Use the array directly when you are giving the color to data set? Like this:

color:colorsList[0]

http://jsfiddle.net/Margo/ZRkJN/4/