css - Javascript plotly border radius how to

Question

Is there an easy way to create a border radius for a plot in plotly module? I have tried this with no luck...

var trace1 = {
    x: time,
    y: scaledData,
    mode: 'lines',
    type: 'scatter'
};

var layout = {
    xaxis: {type: 'date'},
    yaxis: {title: 'Moisture %'},
    width: 320, 
    height: 320, 
    margin: {l: 50, r: 30, b: 50, t: 65, pad: 10},
    paper_bgcolor: '#79ff4d',
    plot_bgcolor: '#c6ffb3',
    borderRadius: '15px',
    title:'Past 24 Hours'
}


return (
    <Plot data={[trace1]}
      layout={layout}
    />
  );

I also tried the css method but I think I am doing something wrong here as well. I tried creating a div of same size and position and wrapping the plot in it. Then putting a radius on the div but it is behind my plot so it does me no good. Not sure how to do the css hack but I would accept this answer as well, although more work.

Answer 1

等待大神答复