SVG fill area under the path only

[YraZinchenko]

First I wanted to say thank you for such a powerful library, now it really looks like the community needs it.

My question and request for help is how to correctly fill the space under the graph, I have a ready-made solution using react-native-redash but I would like to rewrite it to use this library, due to performance issues - I may there are many points for the chart, and I solved my task with react-native-redash using two SVGs: one with a regular line (line) and the second (area) to which I already attached the bottom fill, such a solution in my case is undoubtedly leads to a drop in performance when switching graph data when it should smoothly rebuild. I will attach two screenshots, one with what I have now and this is the behavior that I want to achieve with this library, and the second is what I got now, I also have a link to the stackoverflow which can further clarify the situation of what behavior I would like to achieve, this question just discusses the problem with which I encountered but only in the WEB version, it looks like there is a solution there that could help me, but I don’t fully understand whether it can somehow be implemented in a mobile solution.


https://stackoverflow.com/questions/59614158/svg-fill-area-under-the-path-only
Do you have any ideas how I could achieve the expected behavior?
I want to say thank you in advance for your help and your work!

[chrfalch]

Hi @YraZinchenko! Thanks for your nice word, we really appreciate it.

If I'm understanding correct you should be able to render this by adding some extra points to the path a little bit outside the canvas so that Skia sees a closed path that extends under and to the side of the screen.