amcharts / amcharts4

The most advanced amCharts charting library for JavaScript and TypeScript apps.
https://www.amcharts.com/
1.16k stars 321 forks source link

How to add a svg shape to fill series in pictorial chart #2663

Closed hardikforall closed 4 years ago

hardikforall commented 4 years ago

I am trying to achieve a liquid fill chart from amcharts pictorial charts I have used SVG path to have a round shape for the chart. but I want to have a svg wave shape to a fill series.

here is a codepen of the chart

the expected result is in below picture

VVrgO

svg path for wave shape

M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z

martynasma commented 4 years ago

I'm afraid this is not possible. Sorry.

martynasma commented 4 years ago

OK, we managed to make it work: https://codepen.io/team/amcharts/pen/rNxqWmv

ahandsel commented 4 years ago

@martynasma Just wanted to say your solution is really cool!

hardikforall commented 4 years ago

@martynasma I received this solution from amcharts premium support. It's really cool. also using this I was able to make progress bar visualization too.

https://codepen.io/hardikforall/pen/GRoYPKx?editors=0110