javascripthtmlplotlyplotly.js

Change plot background color

Looking for advice of how to change the background color of the plotly plot to transparent?

I have looked around the docs, but could not find any reference. 

pie_chart = {
  'data': [{
    'labels': ['V0', 'V1', 'V2', 'V3', 'V4', 'V5', 'V6', 'V7', 'V8', 'V9'],
    'values': [55, 22, 31, 32, 33, 45, 44, 42, 12, 67],
    'type': 'pie',
    'sort': false,
  }],

  'layout': {
    backgroundColor: "rgba(255,255,255,0.5)",
    width: 320,
  }

}

Plotly.newPlot('plot', pie_chart.data, pie_chart.layout);
#plot {
  background-color: lightblue;
}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"> </div>

Solution

  • Please use paper_bgcolor property of layout to make it transparent.

    paper_bgcolor (color):
    default: "#fff"
    Sets the color of paper where the graph is drawn.

    From the official documentation, available here

    pie_chart = {
  'data': [{
    'labels': ['V0', 'V1', 'V2', 'V3', 'V4', 'V5', 'V6', 'V7', 'V8', 'V9'],
    'values': [55, 22, 31, 32, 33, 45, 44, 42, 12, 67],
    'type': 'pie',
    'sort': false,
  }],

  'layout': {
    paper_bgcolor: "rgba(0,0,0,0)",
    width: 320,
  }

}

Plotly.newPlot('plot', pie_chart.data, pie_chart.layout);
    #plot {
  background-color: lightblue;
}
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"> </div>