Unable to format pie chart background

Dash Python
1

I created some pie charts using Graph Objects, and each pie chart looks like this:

Screenshot 2020-07-04 at 9.42.50 PM

There is a strange background color in the pie chart. I have tried to read up on this problem, and tried to set the background to transparent by using:

paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)'

However, the same problem persists. Can anyone tell me what the problem is here? I even tried to find out where the color is coming from using the web inspector in my web browser, but I could not isolate the html element causing this issue.

The code for my pie chart is:

  fig = go.Figure()
  fig.add_trace(go.Pie(labels=counts.index.values.tolist(), values=counts.values))

  fig.update_layout(
    font={
      'size': 8,
    },
    margin={
      't': 50,
      'b': 0,
      'r': 0,
      'l': 0,
      'pad': 0,
    },
    title={
      'text': f'Cluster {cluster_no}',
      'y': 0.85,
      'x': 0.4,
      'xanchor': 'center',
      'yanchor': 'top', 
    },
    titlefont={
      'size': 10
    },
    paper_bgcolor='rgba(0,0,0,0)',
    plot_bgcolor='rgba(0,0,0,0)'
  )

  graph_style = {
    'display': 'inline-block',
    'height': '150px',
    'width': f'{100 / num_selected}%'
  }

  return dcc.Graph(figure=fig, style=graph_style)
2

that makes the background transparent. could this weird colour be coming from the layer beneath the graph itself like the page background? what if you try changing it to white instead?

3

I understand that setting the alpha value to 0 makes the background transparent. However, the layer beneath the graph is white, so I was expecting to see a white background.

In any case, I adjusted the code so that it is:

plot_bgcolor='rgba(255,255,255,1)',
paper_bgcolor='rgba(255,255,255,1)'

but it only changed the color for the legend:

Screenshot 2020-07-06 at 11.03.41 AM

The only workaround that I found to work so far is to manually override the .bg class in my stylesheet:

#compare-graph .bg {
  fill: rgba(0,0,0,0) !important;
}

but I am not sure if it is intended to work as such. Is there a better way to style the plot?