react-native-svg-charts icon indicating copy to clipboard operation
react-native-svg-charts copied to clipboard

How can I remove the edges or sides on the AreaChart

Open hugoh59 opened this issue 3 years ago • 5 comments

Screen Shot 2021-02-08 at 3 46 12 PM

I want to get rid of the leading and ending vertical lines, how can I do that? Thank you.

hugoh59 avatar Feb 08 '21 14:02 hugoh59

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

scaralfred avatar Feb 21 '21 05:02 scaralfred

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.

hugoh59 avatar Mar 04 '21 17:03 hugoh59

@JesperLekland ?

hugoh59 avatar Mar 04 '21 17:03 hugoh59

You need to combine a LineChart and an AreaChart without a stroke

JesperLekland avatar Mar 08 '21 08:03 JesperLekland

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

For the reduce overflowing grid, I used an SVG clip. Screen Shot 2021-05-07 at 10 06 56 Screen Shot 2021-05-07 at 10 10 23

And add a line to avoid using stroke and remove chart edges from both sides. Screen Shot 2021-05-07 at 10 07 08

As result, I have some like next... Screen Shot 2021-05-07 at 10 09 42

ivan-khr85 avatar May 07 '21 07:05 ivan-khr85