Plotly indicator change color of value

Question

I have 4 indicators in plotly with this code:

import plotly.graph_objects as go
from plotly.subplots import make_subplots

fig = make_subplots(
    rows=2,
    cols=2,
    subplot_titles=('Title 1', 'Title 2', 'Title 3','Title 4'),
    specs=[[{'type': 'indicator'}, {'type': 'indicator'}],
 [{'type': 'indicator'}, {'type': 'indicator'}]]
)

fig.add_trace(
    go.Indicator(mode="number", value=2761),
    row=1,
    col=1,
)

fig.add_trace(
    go.Indicator(mode="number", value=281),
    row=1,
    col=2,
)

fig.add_trace(
    go.Indicator(mode="number", value=921),
    row=2,
    col=1,
)

fig.add_trace(
    go.Indicator(mode="number", value=21),
    row=2,
    col=2,
)

fig.layout.annotations[0].update(yanchor='bottom', y=0.6)
fig.layout.annotations[1].update(yanchor='bottom', y=0.6)
fig.layout.annotations[2].update(yanchor='bottom', y=0)
fig.layout.annotations[3].update(yanchor='bottom', y=0)

fig.show()

And that is how the indicators are displayed:

I'm trying to change the color of the values for example I want the value 281 to be in blue. I don't know how to do it and I don't find something in the documentation. If someone can help me, thank you:)

Answer 1

The parameter you want is: https://plotly.com/python/reference/indicator/#indicator-number-font-color

solution using your sample

import plotly.graph_objects as go
from plotly.subplots import make_subplots

fig = make_subplots(
    rows=2,
    cols=2,
    subplot_titles=('Title 1', 'Title 2', 'Title 3','Title 4'),
    specs=[[{'type': 'indicator'}, {'type': 'indicator'}],
 [{'type': 'indicator'}, {'type': 'indicator'}]]
)

fig.add_trace(
    go.Indicator(mode="number", value=2761),
    row=1,
    col=1,
)

fig.add_trace(
    go.Indicator(mode="number", value=281, number_font_color="blue"),
    row=1,
    col=2,
)

fig.add_trace(
    go.Indicator(mode="number", value=921),
    row=2,
    col=1,
)

fig.add_trace(
    go.Indicator(mode="number", value=21),
    row=2,
    col=2,
)

Answer 2

The answer posted by Rob Raymond will fix your problem.

However, with plotly, as ultimately everything resolves to html/css, it is sometimes easier to define the plots with a dictionary so that you don't have to spend hours looking for every argument each time you want to change an attribute:

import plotly.graph_objects as go
from plotly.subplots import make_subplots

fig = make_subplots(
    rows=2,
    cols=2,
    subplot_titles=('Title 1', 'Title 2', 'Title 3','Title 4'),
    specs=[[{'type': 'indicator'}, {'type': 'indicator'}],
 [{'type': 'indicator'}, {'type': 'indicator'}]]
)

fig.add_trace(
    go.Indicator(
        {
        'mode': 'number', 
        'number': {'font': {'color': 'red'}}, 
        'value': 2761
         }
    ),
    row=1,
    col=1,
)

fig.add_trace(
    go.Indicator(
        {
        'mode': 'number', 
        'number': {'font': {'color': 'blue'}}, 
        'value': 281
         }
    ),
    row=1,
    col=2,
)

fig.add_trace(
    go.Indicator(
        {
        'mode': 'number', 
        'number': {'font': {'color': '#ff00ff'}}, 
        'value': 921
         }
    ),
    row=2,
    col=1,
)

fig.add_trace(
    go.Indicator(
          {
        'mode': 'number', 
        'number': {'font': {'color': 'green'}}, 
        'value': 21
         }
    ),
    row=2,
    col=2,
)

This way if you want to change the font size, or family, it is much more straightforward.

Answer 3

The indicator has a setting called 'number' that allows you to change the font color, size, etc. Here is an example of the changes in the first indicator.

fig.add_trace(
    go.Indicator(mode="number", value=2761, number={'font_color':'red', 'font_size':60}),
    row=1,
    col=1,
)