Make the animation of the graph head ripple element

[OlegLR]

Good day, dear supporters and friends! Please help me to resolve the issue. Essence of the question: Make the animation of the graph head ripple element. An example of an idea is shown in the figure. Please provide a solution and if possible a working example. Thank you!
An example of the point ripple idea

[Thangaraj Raman]

@oleglr,

It is not possible to create a ripple effect with the marker as of now, however, you can set markerBorderThickness and markerBorderColor to create a similar effect.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[OlegLR]

Great example! But, my dear friend, the idea is to make the ripple animation dynamic. How to pass css class for the first point of the graph?

[Thangaraj Raman]

@oleglr,

You can update the markerBorderColor every second using setInterval to create a ripple animation for the marker.

Please take a look at this updated JSFiddle for an example.

—
Thangaraj Raman
Team CanvasJS

[OlegLR]

Wow – wow! Fantastic! You are wonderful ! Your example is the most accurate. Sincerely thank you my friend!

[OlegLR]

Great example! Is it possible for only one very first point to have a ripple?

[Thangaraj Raman]

@oleglr,

It is possible to create ripple animation for just a single dataPoint by updating the markerBorderColor at the dataPoint level instead of the dataSeries level.

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[OlegLR]

It’s okay, I solved the problem with an error. The data series variable value has not been defined. Now works without setinterval in normal mode without graphics rendering delays.

[OlegLR]

Thanks, dear friend! Your solution helped a lot in finding a suitable alternative to perform animation. There was one question. How to fix the error message that appears as a result of the function.

Link1
Link2

[Thangaraj Raman]

@oleglr,

Glad that you were able to make it work. If you have any further queries or facing any other issues, kindly create a JSFiddle with your use case and share it with us so that we can look into the code / chart-options being used, understand the scenario better and help you out?.

—
Thangaraj Raman
Team CanvasJS