With Ploty.js, how do you control the transparency of colors on an Area Chart

plotly.js
1

I am able to do an Area Chart following the example in the library. The colors are transparent on the library’s example.

When I change the colors of the fill, I cannot get new colors to be transparent. I changed the colors by adding FILLCOLOR. Adding OPACITY seems to have no effect. I tried multiple settings betwee .1 and .9.

Does anyone know how to do this?

Below is the code I copied from the library, with some of my own data:

var trace1 = {
x: [‘Yr 2014’, ‘Yr 2015’, ‘Yr 2016’, ‘Yr 2017’],
y: [90, 134, 104, 197],
fill: ‘tozeroy’,
type: ‘scatter’,
mode: ‘none’,
showlegend: false
};

var trace2 = {
x: [‘Yr 2014’, ‘Yr 2015’, ‘Yr 2016’, ‘Yr 2017’],
y: [108, 156, 190, 163],
fill: ‘tonexty’,
type: ‘scatter’,
mode: ‘none’,
showlegend: false
};

var trace3 = {
x: [‘Yr 2014’, ‘Yr 2015’, ‘Yr 2016’, ‘Yr 2017’],
y: [123, 171, 113, 133],
fill: ‘tozeroy’,
type: ‘scatter’,
mode: ‘none’,
showlegend: false
};

var layout = {
title: ‘Overlaid Chart Without Boundary Lines’,
yaxis: { range: [50, 200] }
};

var data = [trace1, trace2, trace3];

Plotly.newPlot(‘myDiv’, data, layout);