Question

Is there a way to change font size in "SINGLE VALUE" Visualizations

  • 23 August 2016
  • 34 replies
  • 7138 views

Userlevel 2

HI all I am trying to change font size of single value visualizations kindly provide solution for my problem.



Thank You


34 replies

I know this is an old topic, but I would also really like this feature.
I’m looking for a way of doing this in the configuration of the tile and not in a static way (i.e. via LookML code). I know it is possible to do so in the Multiple Value Visualization, but here it is not possible to do comparison numbers as it is for the single value visualization. 

Looking forward to hearing from you. 

Userlevel 2

Is there a hack to show the text at the bottom darker than what it shows? i am using a single value look.

Any help is appreciated. 

Somehow the title shows opaque with 30-50% transparency i believe, i hope there is an easier way to fix this.

 

I am also looking for the same. Could not find any solution yet. And I don’t link lookML based hacks to solve these problems. The same measure can be used in different places/viz. So I don’t want to control it in the model. 

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. 

 

@tuddin @sunnygudVZ 

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

Is there a hack to show the text at the bottom darker than what it shows? i am using a single value look.

Any help is appreciated. 

Somehow the title shows opaque with 30-50% transparency i believe, i hope there is an easier way to fix this.

 

I am also looking for the same. Could not find any solution yet. And I don’t link lookML based hacks to solve these problems. The same measure can be used in different places/viz. So I don’t want to control it in the model. 

Is there a hack to show the text at the bottom darker than what it shows? i am using a single value look.

Any help is appreciated. 

Somehow the title shows opaque with 30-50% transparency i believe, i hope there is an easier way to fix this.

 

Userlevel 4

probably better workaround 

 

Our users likewise are interested in being able to customize the font size of visualizations - we often display Looker dashboards on TV screens and being able to customize font size would greatly contribute to visibility.

Is it possible to change the font size in Single Value viz of the looker without LookML. or is there any custom viz available in market as an option for this.

As few of them mentioned above , I got this done by (along with adding links and making it bold)


html: <p style="font-size: 85px"><b><a href="URL">{{rendered_value}}</a></b></p> ;;



If its still not working , check :





  • If you have added Value Format - in your visualisation (0, 0# etc) . Remove it (instead add it In dimension/measure definition) , because thats somehow overriding the above html code.




Thanks Annie for helping out on this 😃

Userlevel 4

Note that you could use the new Multiple Value Visualization from the marketplace. You can display just one value with it and have the ability to set the font size.

I know this is an old topic but doesn’t seem to be added as a feature? I’m looking for a way of doing this in the configuration of the tile and not in a static way (i.e. via LookML code)

Userlevel 3

Hey @Matthew.Darwin, you should also be able to use {{value}}. For example,



html: <p style="color: red; font-size: 50px"> {{ value }} </p> ;;



As you mentioned, rendered value is used when we want to apply Looker’s value formatting.

Userlevel 1

Ah, so in order to be able to specify the size in the html we need to use rendered value, not value? Seems counter intuitive to mean, given the documentation refers to rendered value being the default formatting for Looker, but we can work with that.

Userlevel 2

Added a snapshot



Userlevel 2

Hi All,



Below html in LookML works fine for “SINGLE VALUE” Visualizations.



html:

{{ rendered_value }}

;;

Thanks,


Kaushal

I’m interested in that too, can you provide more info please! Can’t handle other forums, i know you can help!

From the Edit menu on the right, choose the Table Theme that works for you.


Userlevel 1

It is a bit hacky, but that does work to an extent. Nice touch with the soft hypen as the column header.



As someone fairly new to Looker, how do you change the background colour of the header bar in the table, however?

Userlevel 1

Thanks Romain.

Matt, my hack, if you can call it that, was to use a table visualization for HTML measure instead of single value visualization.Table Viz respects the HTML formatting better. I would then hide the row number, other dimensions and use soft hypen as the column header name for the HTML measure. It is not clean, but works.



Userlevel 3
Badge

I see, thank you for the update Matthew. I am relaying this to our product team now!

Userlevel 1

Hi Romain; unfortunately that doesn’t work. The displayed text size is the same for all single value tiles on the dashboard.



The dimensions in the following image are coded thus:-



  dimension: email {

type: string

sql: ${TABLE}.Email ;;

description: "The Agent's email address"

html: <font size="20">{{ value }}</font> ;;

}



dimension: name {

type: string

sql: ${TABLE}.Name ;;

description: "The Agent's name."

html: <font size="50">{{ value }}</font> ;;

}



Yet in the dashboard they are sized the same.





It looks like whatever the size is specified as, it is then being overriden by the single value wrapper class.

Userlevel 3
Badge

@Matthew.Darwin, yes I will let our team know that you will want to have control over the font size in the option of the Single Value visualization.


For the time being, if you try to apply this to one specific Single Value viz, I would suggest making an additional measure, using the same code but changing the html for that new field and define the Single Viz on this measure to show it larger than other Single Viz using the same data.

Userlevel 1

I’m also interested in this. There are times that I want a specific single value to be much larger than other single values. Currently even when using the font size property in html, all fonts are resized to the same size, which defeats the purpose.



Can this be raised?

Userlevel 3

Hi @p_talkad, I’ll let the product team know that this is a feature that you’re interested in. For now, you should be able to accomplish this with html formatting like so:



dimension: formatted_field

sql: ${TABLE}.field_name

html: <font size="10">{{ value }}</font>

Reply