Using flot chart, I need to split the background into two colors. It is not going to be right down the middle, it will have a slight offset.

As of what I can see I can not find any documents on the internet that provide this information. If someone could point me in the right direction that would be great. Can someone put code in on how to do it if it is possible?

Using flot chart, I need to split the background into two colors. It is not going to be right down the middle, it will have a slight offset.

As of what I can see I can not find any documents on the internet that provide this information. If someone could point me in the right direction that would be great. Can someone put code in on how to do it if it is possible?

• javascript
• html
• charts
• flot

• Please ask a question and provide what you have already tried to solve this problem. – John Koerner Commented Jun 19, 2013 at 20:25
• My question is I do not know how to do it and i can not find it... I was thinking of using a bar and changing its opacity, would that work? – alex wilhelm Commented Jun 19, 2013 at 20:29

1 Answer 1

If I understand your question correctly, the easiest way is to use the grid markings option.

For example:

$.plot($("#placeholder"), [ d1 ], {grid: {
    markings: [
        {xaxis: { from: 0, to: 6 },color: "#C11B17"},
        {xaxis: { from: 6, to: 100},color: "#FDD017"}
    ]}
});

Produces:

Fiddle here.