Make the animation of the graph head ripple element

• June 20, 2022 at 2:33 pm #38122
  
  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

  June 21, 2022 at 8:32 pm #38158
  
  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

  June 22, 2022 at 12:30 am #38159
  
  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?

  June 23, 2022 at 5:38 pm #38207
  
  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

  June 26, 2022 at 2:20 pm #38280
  
  OlegLR

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

  June 26, 2022 at 3:35 pm #38282
  
  OlegLR

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

  June 27, 2022 at 6:10 pm #38287
  
  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

  June 30, 2022 at 1:42 am #38324
  
  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.

  June 30, 2022 at 1:45 am #38325
  
  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

  June 30, 2022 at 6:32 pm #38334
  
  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