Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Animations on gauge needle

Hello,
I am new to plotly.js and what I would like to do is a gauge graph with animation on the needle when the value is updated. I checked the animation API method, but when animating a gauge with shapes, nothing is animating so I wondering if it’s possible to use animation with this type of graphs or not?

A workaround would be setInterval or animationFrame, with the relayout method.The code I am playing with you can look it here: https://codepen.io/ascotto/pen/eGNaqe?editors=0011

Cheers!

That’s correct. Layout object currently don’t animate at the moment.

I’d recommend plotting your gauge needle as a scatter trace instead.

Why as a scatter? Would not this change the whole gauge look?
I will try it when have some time.

For now what I did is this: creating a needle as a shape, than instead calculating the position of the needle at every update, I placed it at 0 degrees, and than with CSS rotation and transitions was able rotate it at the desired degree, maybe sounds a bit hacky but works well and was a simple solution.

Another thing that I noticed was that if the needle is calculated with this formula
function gaugePointer(value){

var degrees = 180 - value,
 radius = .5;

var radians = degrees * Math.PI / 180;
var x = radius * Math.cos(radians);
var y = radius * Math.sin(radians);

// Path: may have to change to create a better triangle
var mainPath = 'M -.0 -0.035 L .0 0.035 L ',
pathX = String(x),
space = ’ ‘,
pathY = String(y),
pathEnd = ’ Z’;
var path = mainPath.concat(pathX,space,pathY,pathEnd);

return path;

}

the shape of the needle was different
image

at 90° and 10° the shape changes, tried to figure it out why, but after setting the needle at 0 and than animating with CSS the needle shape was always the same, so with CSS solved 2 problems.

Because only scatter traces animate smoothly at the moment.