Plotly.js gradient color on time series chart

I am working on a time series chart and wondering if it’s possible for a chart to have like a gradient background. This is the pen of what I currently have: https://codepen.io/boinx-fm/pen/RqogXV

var data = [{
     x: [time],
     y: [rand()],
     mode:'lines',
     fill:'tozeroy',
     fillcolor :'rgba(249, 180, 14, 0.5)
 }];

Attached is the sample background I’m trying to achieve:

gradient background

Thanks!

Answer

Plotly.js does not support gradient color at this moment.

You can subscribe to https://github.com/plotly/plotly.js/issues/581 for development info.

To change background color of the layout:

var layout = {
  xaxis:{
    range:[newTime,nextTime]
  },
  yaxis:{
    range:[0,1],
    zeroline: false,
    showline: false,
    autotick: true,
    ticks: '',
    showticklabels: false
  },
  // Change background color here ...
  paper_bgcolor: 'green',
  plot_bgcolor: 'blue'
}