How to change the text size?

Setup, Configuration and Use Widgets
1

Although I have read several topics about changing the size none of them worked for me. I have following widget (part of it):

slots:
  default:
    - component: oh-label-card
      config:
        action: analyzer
        actionAnalyzerCoordSystem: time
        actionAnalyzerItems: =[props.tempItem]
        bottom: -30px        
        icon: f7:thermometer
        iconColor: '= Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= -5 ? "purple" : Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= 0 ? "blue" : Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= 15 ? "lightblue" : Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= 25 ? "green" : Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= 35 ? "orange" : "red"'
        iconSize: 51px
        item: =(props.tempItem)
        label: =`${items[props.tempItem].state}`
        left: 30
        noShadow: true
        position: absolute
        right: 70px
        trendGradient:
          - "#f94144"
          - "#42b983"
          - "#3a86ff"
        trendItem: =(props.tempItem)
        vertical: false
        width: 200%
        z-index: 1
        style:
          font-size: 270%
          font-weight: bold

I simply would like to change the text size and make it bolt? How can I do that?

Thanks

2

If you mean you want to change the size and weight of the actual label text then there are built in properties for that:

If you want to change the size and weight of the header and or footer then that will be a little more difficult.

3

It is a text of a trendline. When using this:

style:
          fontsize: 270px
          fontweight: bold

it has no effect and the text remains the same. So the question is how can I change size and weight of such a text?

4

The card trendlines do not have text, so I am not sure what you are referring to. In an oh-label-card you have the possibility for text in the header (title), the footer, and the label.
image

As described in the help doc, you can control the size and weight of the label text using the fontSize and fontWeight properties. If you wish to change the text in the header or footer you cannot do this directly and would need to resort to css injection through a stylesheet property.

No, it wouldn’t for several reasons:

  1. The properties in the help doc are direct configuration properties (they go under config, not in the style object)
  2. The properties are case-sensitive so fontsize is not the same as fontSize
  3. The style object is for passing css properties to the html element that is represented by the widget component. However, most of the widget components actually represent complex html entities made of of several different elements. In these cases, the definition of the component must make explicit which element style actually refers to or if you can even use it at all. So, for an oh-label-card which is intended to be a low-code, pre-formatted component, the style object is not used at all (and probably wouldn’t even apply to the label anyway, but to the card div element). That’s why for important, common, style choices such as the size and weight of the font, direct configuration properties have been provided.
5

Thanks for the explination - no it works as you described!!