Lovelace: performance-card prototype

here is my yaml. I tried to set the height and width, then the cauge is smaller, but not alligned to the card.

type: horizontal-stack
cards:
  - type: custom:canvas-gauge-card
    entity: sensor.buienradar_humidity
    font_size: 1em
    gauge:
      type: radial-gauge
      title: Humidity (%RH)
      width: 320
      height: 320
      minValue: 0
      maxValue: 100
      startAngle: 45
      ticksAngle: 270
      valueBox: true
      majorTicks:
        - '0'
        - '10'
        - '20'
        - '30'
        - '40'
        - '50'
        - '60'
        - '70'
        - '80'
        - '90'
        - '100'
      minorTicks: 2
      strokeTicks: true
      highlights:
        - from: 0
          to: 39
          color: rgba(239, 93, 13, .75)
        - from: 41
          to: 69
          color: rgba(4, 205, 24, .75)
        - from: 71
          to: 100
          color: rgba(74, 123, 180, .75)
      borders: true
      colorPlate: '#ddd'
      animationRule: bounce
      valueDec: 0
  - type: custom:canvas-gauge-card
    entity: sensor.buienradar_wind_direction_azimuth
    font_size: 1em
    gauge:
      type: radial-gauge
      title: Wind direction
      width: 320
      height: 320
      minValue: 0
      maxValue: 360
      majorTicks:
        - 'N'
        - NE
        - E
        - SE
        - S
        - SW
        - W
        - NW
        - 'N'
      minorTicks: 22
      ticksAngle: 360
      startAngle: 180
      strokeTicks: false
      highlights: false
      colorPlate: '#ddd'
      valueBox: false
      valueTextShadow: false
      borders: true
      borderShadowWidth: 0

Mine is 3 gauges in a normal horizontal stack card. Maybe adjust the width & height

type: custom:canvas-gauge-card
entity: sensor.solar_weather_v3_sea_pressure
card_height: 150
gauge:
  type: radial-gauge
  title: Pressure (hPa)
  width: 150
  height: 150
  borderShadowWidth: 0
  borderOuterWidth: 0
  borderMiddleWidth: 0
  borderInnerWidth: 0
  minValue: 960
  maxValue: 1070
  startAngle: 45
  ticksAngle: 270
  valueBox: true
  majorTicks:
    - '960'
    - '970'
    - '980'
    - '990'
    - '1000'
    - '1010'
    - '1020'
    - '1030'
    - '1040'
    - '1050'
    - '1060'
    - '1070'
  minorTicks: 2
  strokeTicks: true
  highlights:
    - from: 960
      to: 1000
      color: rgba(74, 123, 180, .75)
    - from: 1000
      to: 1050
      color: rgba(4, 205, 24, .75)
    - from: 1050
      to: 1070
      color: rgba(239, 93, 13, .75)
  borders: false

Add style and change the scale for bigger or smaller. Like 1.1 or 2 or 0.5

Found the problem. The problem is in the caching from the browser.
if you have different sizes of the gauges on different tabs in home assistant, you have to refresh the page hard to get it right. Can that be solved in css or is this a bug?

@GlennHA I tried your suggestion, but i can’t style the gauge.

nice dials, pity they can’t be used

budik