Flot: Add vertical line to grid and background on its right side

Question

I discovered Flot yesterday and I'm curious if I can add a vertical line to my graph and have a different background on the right side of the line.

This is my graph so far: http://jsfiddle.net/cncvL/1/ (evolved from Flot example)

For now I've added an extra line by adding data on the y-axis but that is not a desired solution.

Answer 1

You can use the "markings" property of the "grid" property to have different colours either side of the line. e.g. edit your JSFIDDLE to say:

    grid: {
        backgroundColor:
        {
            colors: ["#FFF", "#DDD"]
        },
        markings: [
            {xaxis: {from:  1, to: 10}, yaxis: {from: -3, to: 12}, color: "#eeeeff"},
            {xaxis: {from: 10, to: 14}, yaxis: {from: -3, to: 12}, color: "#eeffee"},
            {xaxis: {from: 10, to: 10},                            color: "#0000bb"}
        ]
    },

You can also use it to draw a simple line the third 'xaxis' above, rather than doing it the way that you did (another series).