react-native-svg-charts
react-native-svg-charts copied to clipboard
How can I remove the edges or sides on the AreaChart
![Screen Shot 2021-02-08 at 3 46 12 PM](https://user-images.githubusercontent.com/25149138/107235300-d9c70d80-6a24-11eb-9a39-775541d8c2b3.png)
I want to get rid of the leading and ending vertical lines, how can I do that? Thank you.
@hugoh59 It's great you raised this issue. Did you find a solution? Other that this, I was also looking for a quick solution to change the "zIndex" of the first and last element. As you can see the first and the last element of your image are being cut off as they go behind the chart view.
I'm still looking for a solution, I have not found one so far. For the edges behing cuted off I'm using the contentInset prop like so contentInset={{ left: 25, right: 15 }}
which helped.
@JesperLekland ?
You need to combine a LineChart and an AreaChart without a stroke
I have a similar problem. In my case, I need to remove the chart edges from both sides.
Also, I needed to remove the overflow background grid. Because when I use contentInset
my chart a little smaller than the background Grid.
![Screen Shot 2021-05-07 at 09 59 46](https://user-images.githubusercontent.com/36078312/117410629-5d58a380-af1b-11eb-8878-f69ea7fb424e.png)
For the reduce overflowing grid, I used an SVG clip.
And add a line to avoid using stroke
and remove chart edges from both sides.
As result, I have some like next...