How can I change the font size for a single value?

I’d like to make my single value visualizations bigger but there is no font or size feature in the settings.  Can someone please help me? This is very easy to achieve with a couple of clicks in Tableau but in Looker it’s almost impossible.  Any tips will be much appreciated.  

Solved Solved
2 3 6,422
1 ACCEPTED SOLUTION

n_davis
Participant V

You’ll want to use html for a single value viz font size change. You’ll take the measure and add html to it for font size, color, text, etc.

For situations where I have more than one row, I do things like:

html: <div class="vis">
<div class="vis-single-value" style="line-height: 1;font-size: 17px; text-align:center;color:black;" >
</div>
</div>;;

and then you can add your rendered value and texts into the html. 

View solution in original post

3 REPLIES 3

Dawid
Participant V

Unfortunately the font size for single-value visaualisations is applied automatically by Looker’s front-end engine. Some magic calculates it, which is far from perfect, especially if they either get the same size or even worse, the tiles with more space are smaller. I’m fighting this battle right now

A lot of space + small font:

7048ad4b-2044-4993-a7db-0044dc69cd74.png

Narrow tile yet font is bigger:

b2c14538-abf8-4168-b06b-647e1ee11e98.png

One workaround would be to select a Multi Value visualization and then remove all fields except one you want. We can then adjust font size from the visualization settings.

n_davis
Participant V

You’ll want to use html for a single value viz font size change. You’ll take the measure and add html to it for font size, color, text, etc.

For situations where I have more than one row, I do things like:

html: <div class="vis">
<div class="vis-single-value" style="line-height: 1;font-size: 17px; text-align:center;color:black;" >
</div>
</div>;;

and then you can add your rendered value and texts into the html. 

Top Labels in this Space
Top Solution Authors