Chart fill parent dimension

Is it possible to make a chart fit the parent component dimension? Without specifying the width or height attribute, the chart crashes (NaN provided).

I'd like to wrap the chart in a Card component, with custom borders and so on, but I don't understand how to correctly wrap it.

Thank you for this great library, it's one of my favourite! S.

@besil Did you manage to get the chart to fill up 100% of the parent container's dimensions?

Tried to set the height props to 100%

<LineChart
    height={'100%'}
/>

but the app throws an error about Invariant Violation containing

"y1":"<<NaN>>"
"y2":"<<NaN>>"

Hi, I just used

const screenWidth = Dimensions.get('window').width; <PieChart data={...} width={screenWidth}/>

I'd have preferred a 100% option, but it doesn't seem to work

Any updates on this issue?

Yeah, I have an issue with this too, I need to manually remove padding from all parent containers to make chart not overflow parents.

Still an issue in 2021.. No one seems to know how to get this working.. My other option might be to somehow get the dimensions of parent View and go from there..

Any update?

Any update?

I did it somehow, don't remember how though. When I get back to work tomorrow I can check it out and update this thread.

You are my hero!

Any update?

I did it somehow, don't remember how though. When I get back to work tomorrow I can check it out and update this thread.

Are you still at work ? 😆

You can get dimensions of the View component with onLayout(), then set width and height in state and use them in the LineChart.

See solution by mathcale https://github.com/indiespirit/react-native-chart-kit/issues/506#issuecomment-917564118

See solution by mathcale #506 (comment)

any other solution so far? I've been facing this issue for days 😞