How to change: space between radio-button and label / font-size of gauges?

Dash Python
1

Hey guys,

I’m getting started with Dash and have two little problems:

  1. How to change the space between radio-buttons and the label?
    I’m using dcc.RadioItems and already tried it withstyle={"font-size": 14, "padding":"10px"} but it didn’t work

  2. How to change the font-size of the value (and unit) in gauges/thermometers?

Thanks a lot in advance!

2

This post may help with question 1.

Not sure about 2. I’m afraid.

3

Cheers, this one helped me already!

4

Does anyone have an idea about the second question?

5

Untested, but I think you might be able to do it with some custom CSS. Set the id of the Gauge: daq.Gauge(id="my-gauge"), then write some CSS that selects any text elements within the Gauge and changes the font size.

#my-gauge text {
  font-size: 20;
}

Save that in a file called style.css or something and put it in your assets/ folder so that the app picks it up automatically. See here for more details. Let me know how you get on.

6

Hey tcbegley, I tried your suggestion, but it didn’t have any effect.

7

Hi @HDFready

So far, the only way I’ve made it work is to set the style in the label and the scale. Here is an example:

gauge_style

daq.Gauge(      
        color={'ranges':{'red':[0,2.5],'green':[2.5,10]}},
        value=2,
        label={'label':'FUEL', 'style':{'font-size':'30px'}},
        max=10,
        min=0,
        scale={'custom':{'0':{'label':'E', 'style':{'font-size':'30px'}},
                         '5':{'label':'1/2', 'style':{'font-size':'30px'}},
                         '10':{'label':'F', 'style':{'font-size':'30px'}},
                        }
              }
    ),

(Edit - posted a better example)