search

xanderdeseyn / react-native-responsive-linechart

A customizable and responsive line or area chart for react-native
https://react-native-responsive-linechart.surge.sh
MIT License
202 stars 46 forks source link

Use borderRadius style? #130

Closed aLemonFox closed 2 years ago

aLemonFox commented 2 years ago

Is it possible to use borderRadius prop on <Chart>? Currently the area doesn't match the parents bounds:

<Chart
    style={{ flex: 1, borderWidth: 5, borderRadius: 10 }}
    data={[{ x: 0, y: 5 }, { x: 1, y: 10 }, { x: 2, y: 5 }, { x: 3, y: 10 }]}
    xDomain={{ min: 0, max: 3 }}
    yDomain={{ min: 0, max: 20 }}
>
    <Area smoothing={'cubic-spline'} theme={chartStyles.area} />
</Chart>
apfz commented 2 years ago

Try adding overflow: 'hidden' to the style.

<Chart
    style={{ flex: 1, borderWidth: 5, borderRadius: 10, overflow: 'hidden' }}
    data={[{ x: 0, y: 5 }, { x: 1, y: 10 }, { x: 2, y: 5 }, { x: 3, y: 10 }]}
    xDomain={{ min: 0, max: 3 }}
    yDomain={{ min: 0, max: 20 }}
>
    <Area smoothing={'cubic-spline'} theme={chartStyles.area} />
</Chart>
aLemonFox commented 2 years ago

Forgot this issue was still open. Setting overflow: 'hidden' works. Thanks @apfz!