Responsive Indicator font size

📊 Plotly Python
1

I am using indicators and here is some of the sample code

fig.add_trace(go.Indicator(
        mode = "number",
        value = df['Column_A'].sum(),
        title = 'Total A',
        number = {"font":{"size":25}},
        domain = {'row': 0, 'column': 1}))

I am trying to make the font responsive and it doesn’t work because size property under font only accepts numbers (ints or floats). So I am unable to set it to rem units or vw units. Need a solution for this please.

2

Hi @vsathwikm ,

Based on documentation if you use font size properties, it has to be int/float value.
But I found interesting tricks using prefix and suffix to insert some html tags for styling yourfont number.Even you can change the color of number using this way.

So instead using font, try to use prefix and suffix, like the example code below.

# Solution using prefix and suffix properties.
fig.add_trace(go.Indicator(
        mode = "number",
        value = 450,
        title = 'Total A',
        number = {"prefix":"<span style='font-size:1.2em;color:gray'>","suffix":"</span>"},
        domain = {'row': 0, 'column': 1}))

image

Hope this help.

1 Like
3

Thank you @farispriadi. This seems to be working but somehow when I try this on my code, the title and the number are overlapping. Not sure why this is happening.

AT 50rem, within a div with 10vh height:
image

AT 200rem, within the div with 10vh height:
image

Is there a way to control the size and alignment of the title as that is not evident in the documentation as well. The only props title has is to control alignment to left, right and center and the font property of the title again has same issues with font size being only number and non-responsive values.

4

I think, instead of using the title property I can put the text above the indicator and be able to customize and control it that way. Its better for responsive design. But if you are able to suggest a better approach, I’d be grateful. Thank you faris.

1 Like
5

Hi @vsathwikm ,

To control the size and alignment of the title, you can use text and align attributes.
insert <span> html tag inside text attribute for custom size of the title.

for example if you want to align title to left you can do this:

title = {"text":"<span style='font-size:2rem;color:gray;'>Total A</span>","align":"left"},

you can see the docs here:

try adjust the right size value of both title and number .
for example below , the title and number are not overlapping and implement “left” alignment.

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Indicator(
        mode = "number",
        value = 450,
        title = {"text":"<span style='font-size:2rem;color:gray;'>Total A</span>","align":"left"},
        align="left",
        number = {"prefix":"<span style='font-size:8rem;color:gray'>","suffix":"</span>"},
        domain = {'row': 0, 'column': 1}
        )
)

fig.show()

image

Hope this approach help you find better solution.
Good luck.

1 Like
6

If you want to make the font size responsive using rem or vw units in Plotly Express for the Indicator’s number, you can use a combination of CSS styles and HTML tags. You can achieve this by setting the title property with an HTML string that includes inline CSS styles.

import plotly.graph_objects as go

Assuming df is your DataFrame

df = …

fig = go.Figure()

fig.add_trace(go.Indicator(
mode=“number”,
value=df[‘Column_A’].sum(),
title=‘Total A’,
number={“font”: {“size”: 25}},
domain={‘row’: 0, ‘column’: 1}
))

Update the layout to include responsive font size using vw units

fig.update_layout(
title_text=‘Total A’,
)

fig.show()

7

@farispriadi This helped me. However, if I used span for both title and number, and use the same 2 rem and 8 rem sizes, the number somehow shows up much much smaller but the title at 2 rem seems big and readable. As I increased the size of the number it starts becoming readable, and after a point it starts to overlap with the title. I fixed the number to a constant/unresponsive size of 40 and the title at 1 rem and it renders well with good white space between number and title. It’ll do for now.

1 Like