Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

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

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!

This post may help with question 1.

Not sure about 2. I’m afraid.

Cheers, this one helped me already!

Does anyone have an idea about the second question?

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.

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

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)