HomeAssistant Lovelace-UI - custom gauges for in/outside temperature and humidity

HA_Lovelace_custome-gauges-example.yaml

  - title: Gauges
    id: gauges
    icon: mdi:monitor
    cards:
      - type: vertical-stack
        cards:
        - type: horizontal-stack
          cards:
            - type: custom:canvas-gauge-card
              entity: sensor.teplota_venku
              card_height: 220
              shadow_height: 15%
              font_size: 1em
              gauge:
                type: radial-gauge
                units: °C
                title: Temperature outside
                width: 220
                height: 220
                minValue: -30
                maxValue: 50
                startAngle: 45
                ticksAngle: 270
                valueBox: true
                valueInt: 2
                valueDec: 1
                majorTicks: ["-30", "-25", "-20", "-15", "-10", "-5", "0", "5", "10", "15", "20", "25", "30", "35", "40", "45", "50"]
                minorTicks: 5
                strokeTicks: true
                highlights: [ {"from": -30, "to": 5, "color": "rgba(50, 50, 200, .5)"}, {"from": 28, "to": 50, "color": "rgba(200, 50, 50, .5)"} ]
                borders: true
                colorPlate: "rgb(240, 240, 240)"
                colorTitle: "rgb(52, 60, 66)"
                colorUnits: "rgb(52, 60, 66)"
                colorValueBoxBackground: "rgb(220, 220, 220)"
            - type: custom:canvas-gauge-card
              entity: sensor.teplota_kuchyne
              card_height: 220
              shadow_height: 15%
              font_size: 1em
              gauge:
                type: radial-gauge
                units: °C
                title: Temperature inside
                width: 220
                height: 220
                minValue: 10
                maxValue: 40
                startAngle: 45
                ticksAngle: 270
                valueBox: true
                valueInt: 2
                valueDec: 1
                majorTicks: ["10", "15", "20", "25","30", "35", "40"]
                minorTicks: 5
                strokeTicks: true
                highlights: [ {"from": 10, "to": 18, "color": "rgba(50, 50, 200, .5)"}, {"from": 26, "to": 40, "color": "rgba(200, 50, 50, .5)"} ]
                borders: true
                colorPlate: "rgb(240, 240, 240)"
                colorTitle: "rgb(52, 60, 66)"
                colorUnits: "rgb(52, 60, 66)"
                colorValueBoxBackground: "rgb(220, 220, 220)"
        - type: horizontal-stack
          cards:
            - type: custom:canvas-gauge-card
              entity: sensor.vlhkost_venku
              card_height: 220
              shadow_height: 15%
              font_size: 1em
              gauge:
                type: radial-gauge
                units: "%"
                title: Humidity outside
                width: 220
                height: 220
                minValue: 0
                maxValue: 100
                startAngle: 45
                ticksAngle: 270
                valueBox: true
                valueInt: 2
                valueDec: 0
                majorTicks: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
                minorTicks: 2
                strokeTicks: true
                highlights: [ {"from": 60, "to": 100, "color": "rgba(50, 50, 200, .5)"} ]
                borders: true
                colorPlate: "rgb(240, 240, 240)"
                colorTitle: "rgb(52, 60, 66)"
                colorUnits: "rgb(52, 60, 66)"
                colorValueBoxBackground: "rgb(220, 220, 220)"
            - type: custom:canvas-gauge-card
              entity: sensor.vlhkost_kuchyne
              card_height: 220
              shadow_height: 15%
              font_size: 1em
              gauge:
                type: radial-gauge
                units: "%"
                title: Humidity inside
                width: 220
                height: 220
                minValue: 0
                maxValue: 100
                startAngle: 45
                ticksAngle: 270
                valueBox: true
                valueInt: 2
                valueDec: 0
                majorTicks: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
                minorTicks: 2
                strokeTicks: true
                highlights: [ {"from": 40, "to": 60, "color": "rgba(50, 200, 50, .75)"} ]
                borders: true
                colorPlate: "rgb(240, 240, 240)"
                colorTitle: "rgb(52, 60, 66)"
                colorUnits: "rgb(52, 60, 66)"
                colorValueBoxBackground: "rgb(220, 220, 220)"