Animation of canvas gauges

Hi, I cant get the animation to work well on these gauges, it seems I need the line animation: false to get any resemblance of a smooth action. If I delete the line, every time a new value come in the meter instantly drops to 0 before retuning to the new value.

Im using Safari and have cleared the cache and refreshed the page after each code change.

Any help would be appreciated in this as I feel I’ve tried everything.

type: custom:canvas-gauge-card
entity: sensor.emoncms_vrms_in_volts
card_height: 125
gauge:
  type: radial-gauge
  title: Volts
  valueBox: false
  needleType: arrow
  needleWidth: 2
  minValue: 211
  maxValue: 258
  startAngle: 90
  ticksAngle: 180
  width: 220
  height: 220
  strokeTicks: true
  borders: false
  borderShadowWidth: 0
  animationRule: linear
  animationDuration: 1500
  animation: false
  highlights:
    - from: 211
      to: 216
      color: rgba(200, 50, 50, .75)
    - from: 216
      to: 253
      color: rgba(50, 200, 50, .75)
    - from: 253
      to: 258
      color: rgba(200, 50, 50, .75)
  majorTicks:
    - '210'
    - '230'
    - '260'

1 post - 1 participant

Read full topic