Change plot background color

Question

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 1

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>

Solution 2

plot_bgcolor sets the color of plotting area in-between x and y axes.

paper_bgcolor sets the color of paper where the graph is drawn (= outside of axes but inside of parent div).

So for a transparent background you need to use both in layout section like this:

layout = {
   plot_bgcolor: "rgba(0,0,0,0)",
   paper_bgcolor: "rgba(0,0,0,0)"
}

Official reference: https://plot.ly/javascript/reference/#layout-paper_bgcolor

Solution 3

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': {
    width: 320,
  }

}

Plotly.newPlot('plot', pie_chart.data, pie_chart.layout);

#plot {
  background-color: lightblue !important;
}
.main-svg {
   background-color: transparent !important;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"> </div>

Is it What you looking for ? Hope it helps!!

Comments

[Idan]

You know, yes, and no. I have tried that, but stupidly failed. That is OK workaround, but I still wonder if there a better way than important

[Sidhanshu_]

thing is we have to override the default style settings for that plot. Important keyword is doing the same!

[Naren Murali]

@Sidhanshu_ There is a plotly property for setting the background color the layout . in layout just give 'layout': { width: 320, bgcolor: "rgb(0,0,0,0)" } and remove the css .main-svg { background-color: transparent !important; } also plot css does not require !important I guess

[Sidhanshu_]

@NarenMurali I tried that. But default were still overriding the given styling for background!

[Naren Murali]

@Sidhanshu_ My bad, the property is paper_bgcolor: "rgba(0,0,0,0)"

[Naren Murali]

@Idan Changed it