Home Forums Chart Support Make the animation of the graph head ripple element

Make the animation of the graph head ripple element

Viewing 10 posts - 1 through 10 (of 10 total)
  • #38122

    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

    #38158

    @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.

    Chart with ripple effect


    Thangaraj Raman
    Team CanvasJS

    #38159

    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?

    #38207

    @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

    #38280

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

    #38282

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

    #38287

    @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

    #38324

    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.

    #38325

    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

    #38334

    @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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.