How to fill a flot line graph without opacity?

Question

How can i fill a flot line graph with no opacity?

lines: {
    show: true,
    fill: true,
    lineWidth:1
   }

'No opacity' means 'completely transparent', i.e. just fill:false. Is that what you want, or do you mean something else? — DNS, May 20 '13 at 11:58
i dont want opacity, it should be filled with color (excluding opacity) — Sweetz, May 20 '13 at 12:24

score 15 · Accepted Answer · answered May 20 '13 at 13:28

15

I think you've mixed-up the terms 'opacity' and 'transparency'. It sounds like what you actually want is no transparency, i.e. a solid color that doesn't allow anything in the background to show through.

To control transparency in Flot, change the 'fill' option from 'true' to a number from 0 to 1, where 0 is fully-transparent and 1 is fully opaque. See customizing the data series in the API docs for more info.

answered May 20 '13 at 13:28

DNS

37,249
18
95
132

Thank You!!... Din't know that part of the graph – Sweetz May 21 '13 at 04:15

score 5 · Answer 2 · answered Oct 17 '13 at 10:03

Flot documentation agrees with DNS's answer, but at least in current stable version (0.8.1) I couldn't make it work.

Checking the Flot source I came up with this solution:

'bars': {
            show: true,
            fill: 1.0,
            fillColor: 'rgba(255,230,230,0.5)',
            lineWidth: 1,
        }

I didn't test it for lines, but it should work with them too.

score 1 · Answer 3 · answered Feb 19 '15 at 22:22

1

If you're using flotr2, you'll notice that none of these solutions work. Instead, try:

lines: {
  fillOpacity:1.0,
  show: true,
  fill: true,
  lineWidth:1
}

answered Feb 19 '15 at 22:22

William Neely

1,923
1
20
23

How to fill a flot line graph without opacity?

3 Answers3