Needle animation not working when state is changed

I am using Syncfusion in a web app using Meteor/React.  It is possible to create nice gauges in a short amount of time with Syncfusion.  The only issue I'm having is the needle animation only works when the gauge is initially loaded.  I set the value for the gauge to the state.  When I do a setState and modify the value, the needle jumps instantaneously.  I set the animation as shown in the code below.  Any ideas as to why the animation is not working?  Thanks.


<PointerDirective value={this.state.gaugevalue}
animation={{
enable: true,
duration: 1500
}}
pointerWidth={10}
color='black'
cap={{
radius:10,
color: 'silver',
border: {
color: 'grey'
}
}}
needleTail={{
length:'25%',
color: 'black'
}}>
</PointerDirective>

1 Reply

SK Sanjith Kesavan Syncfusion Team April 24, 2018 01:33 PM UTC

Hi Mark, 

Sorry for the inconvenience caused. We have analyzed your query and replicated the scenario in our samples. In typescript, animation in working properly but in react reported issue occurs. In the below link, we have attached typescript sample for your reference.  

However, we have logged bug report on this. Fix for this bug will be included in our upcoming patch release which is expected to be roll out at the end next week.   

Thanks, 
Sanjith. 


Loader.
Up arrow icon