Hey there! I'm currently experimenting with Plotly to create some awesome charts, and I've been trying to figure out how to give my area-charts a gradient instead of the usual fill with opacity.
This is how I typically build my graph:
Plotly.newPlot(className, chartData, layout, {displayModeBar: showModeBar});
After building the chart, the surrounding dom elements end up looking like this: https://i.sstatic.net/FUPpF.png
Then, in order to implement the gradient, I use the following code snippet:
function createGradient() {
var svg = document.getElementById('line-chart-impressions').getElementsByClassName('trace')[0];
var fillChange = document.getElementById('line-chart-impressions').getElementsByClassName('js-tozero')[0];
var defs = document.createElement('defs');
var linearGradient = document.createElement('linearGradient');
linearGradient.setAttribute('id', 'gradient');
var stop1 = document.createElement('stop');
stop1.setAttribute("offset", "5%");
stop1.setAttribute("stop-color", "#FFC338");
var stop2 = document.createElement('stop');
stop2.setAttribute("offset", "100%");
stop2.setAttribute("stop-color", "#FFEA68");
svg.appendChild(defs);
defs.appendChild(linearGradient);
linearGradient.appendChild(stop1);
linearGradient.appendChild(stop2);
fillChange.setAttribute('fill', 'url(#gradient)');
}
Upon implementing the gradient, the dom changes to something like this: https://i.sstatic.net/FUPpF.png
I have a suspicion that the reason it's not displaying properly is because I add the gradient later on. I'm eager to find a solution as my chart ends up without the desired fill effect.