How to change the font size of a value in a Gauge chart

plotly.js
1

Hello,

does anyone know how to change the font size of a value in a Gauge chart? I wanted to make the font smaller (the number “20” below), in a way that didn’t stay above the title of the chart.

image

Link to codepen: https://codepen.io/amandasantosf/pen/qBaNbGK

2

See codepen.
It is number.font.size.

3

Thank you so much! But would you also happen to know how to center this number inside the gauge? I couldn’t find a property for that. Here’s how it’s looking now: https://codepen.io/amandasantosf/pen/qBaNbGK?editors=0010

4

Hola amanda,

Why if you just change the ‘Title’ possition?

Image
Image737×303 17.6 KB

5

Hey! I really needed the title to stay in the bottom of the chart :frowning:

6

Hey amanda,

How do you can put the Title there, I just can put in the left, right and center but in the top of the chart?

7

Hey @Eduardo, I need either the title to be positioned lower in the chart or the number to be positioned higher, in the center of the gauge, so that one doesn’t overlap the other. I’m trying to do this by doing yanchor: ‘bottom’ in the title properties, but it doesn’t work. Do you know how I can change the position of the title or the number?

8

No, actually I don’t use JS, just Dash.
I wonder if this trick could work:

import plotly.graph_objects as go

fig = go.Figure(go.Indicator(
    domain = {'x': [0, 1], 'y': [0, 1]},
    value = 450,
    mode = "gauge+number+delta",
    title = {'yanchor': 'auto',  'y': 0, 'text': "Speed"},
    delta_font_color= 'white',
    delta_increasing_color="white",
    delta_decreasing_color="white",
    gauge = {'axis': {'range': [None, 500]},
             'steps' : [
                 {'range': [0, 250], 'color': "lightgray"},
                 {'range': [250, 400], 'color': "gray"}],
             'threshold' : {'line': {'color': "red", 'width': 4}, 'thickness': 0.75, 'value': 490}}))

fig.show()

Image
Image836×378 28 KB

This shows the Delta in White and gives space for the Title, but I think that if the Delta is shown Up then the Title will be overlapped with some white number. :woozy_face:

1 Like
10

that seemed to do the trick, thank you @Eduardo!

11

Glad to hear that.

Creo que merezco un :heart: :thinking:
no? :joy:

Ahi lo veo :smiley:

13

I’m using V10 to create gauge chart but the dimension values are quite long and I need to reduce the font size!