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
   }

Answer 1

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.

Answer 2

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.

Answer 3

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
}