Plotly Dash Pie Chart - Segment Text Color and Decimal Places

Question

I created a pie chart (code below). The font color of the % values on top of each pie segment varies (either black or white) even though I set font to white in layout. I would like it to be white text on all pie segments.

Additionally the number of decimal places of the % values vary across the pie segments, from one decimal place to three. I would like to set it to one decimal place. Any suggestions?

I am not able to share an image of the pie chart as it has some sensitive data.

fig =  dcc.Graph(
            id='graph',
            figure={
                'data': [{
                        'values': df['count'],
                        'labels': df['labels'],
                        'type': 'pie'
                        }],
                'layout': {
                    'margin': {'l': 30,'r': 0,'b': 30,'t': 30,},
                     "plot_bgcolor": "#111111",
                    "paper_bgcolor": "#111111",
                    "font": {"color": 'white'},
                    'legend': {'x': 0, 'y': 1},
                }
            }
        )

Bas van der Linden Bas van der Linden · Accepted Answer · 2021-05-24T19:37:12

For the text color inside the segments you could set insidetextfont:

Code: fig.update_traces(insidetextfont=dict(...), selector=dict(type='pie')) Type: dict containing one or more of the keys listed below. Sets the font used for textinfo lying inside the sector.

For the percentage precision you could set texttemplate

Code: fig.update_traces(texttemplate=, selector=dict(type='pie')) Type: string or array of strings Default: ""

Template string used for rendering the information text that appear on points. Note that this will override textinfo. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". https://github.com/d3/d3-time-format#locale_format for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are arrayOk: True) are available. variables label, color, value, percent and text.

Example based on your code:

fig = {
    "data": [
        {
            "values": df["count"],
            "labels": df["labels"],
            "type": "pie",
            "insidetextfont": {"color": "white"},
            "texttemplate": "%{percent:.2%f}",
        }
    ],
    "layout": {
        "margin": {
            "l": 30,
            "r": 0,
            "b": 30,
            "t": 30,
        },
        "plot_bgcolor": "#111111",
        "paper_bgcolor": "#111111",
        "font": {"color": "white"},
        "legend": {"x": 0, "y": 1},
    },
}

Plotly Dash Pie Chart - Segment Text Color and Decimal Places

1 Answers