Animation of canvas gauges

Configuration Frontend
1

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'
2

I just used the canvas gauge and found the animation weird, but I didn’t really want it and turned it off.

3

It is strange, when viewing this page: Examples the gauges all work ok so not sure where the problem is.

4

Having used the Flexible Horseshoe card for the longest time, I just started exploring the Canvas Gauge card today and noticed the exact same issue with the animations.
To me it seems that regardless of what settings I use for animations, none of the configurations have any effect apart from animation: false to turn it off

5

i experienced exactly the same. i don t know how to setup the gauge card without this jumping to zero

6

I am not wanting animation at all, but you guys should post an issue on github.

7

Same issue here with Crome and app. Why!!!???