CODEWITHSUNDEEP
flot
madLokesh
madLokesh

Reputation: 1878

Flot: Different Colors in chart plot area of flot chart

Ahoy,

I have a flot chart on which I was able to get different colors on the plot area using the following

 grid   : { borderWidth:0,markings:[
               {yaxis: { from: 200.0, to: 240.0 },color: "rgba(0,255,0,0.3)"},

       {yaxis: { from: 100.0, to: 120.0 },color: "rgba(255,0,0,0.3)"},
       {yaxis: { from: 120.0, to: 180.0 },color: "rgba(255,255,0,0.3)"},
       {yaxis: { from: 260.0, to: 360.0 },color: "rgba(255,255,0,0.3)"},
           {yaxis: { from: 360.0, to: 460.0 },color: "rgba(255,0,0,0.3)"}
                        ]}
                };

But I am getting solid colrs. What I need is something in the image given below [Blending of colors]. enter image description here

How would I attain it ?

Kindly help

Upvotes: 2

Views: 935

Answers (1)

DNS
DNS

Reputation: 38189

Take a look at the grid backgroundColor option, which allows you to specify a gradient. The Specifying Gradients section of the docs has more info and examples.

To synchronize the colors with the y-axis ticks is a little more difficult; you'll need to know in advance how many ticks there are, or guarantee it via the yaxis 'ticks' option. You can then edit the gradient spec to add color entries for each tick, i.e. if there is just one tick, you would have an array with three colors: one for the top, one at tick #1, and one for the bottom of the grid.

Upvotes: 1

Related Questions