react-native-chart-kit
react-native-chart-kit copied to clipboard
toDataURL does not work on iOS.
I am using LineChart
component from the library in my application and I have enclosed the component inside react-native-svg
to get the base64 equivalent of the graph. But the generated base64 does not contains the graph drawn by react-native-chart-kit
.
<Svg ref = {chartRef}>
<LineChart
data={{
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
datasets: [
{
data: rentCostData,
color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,
},
{
data: buyCostData,
color: (opacity = 1) =>
`rgba(14, 124, 202, ${opacity})`,
},
],
}}
width={screenWidth}
height={screenHeight * 0.55}
yAxisLabel="$"
yAxisInterval={1}
chartConfig={{
backgroundColor: 'white',
backgroundGradientFrom: 'white',
backgroundGradientTo: 'white',
decimalPlaces: 0,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
propsForDots: {
r: '6',
},
}}
withDots={true}
/>
</Svg>
Then I am using ref to get the base64 data.
this.chartViewRef.current &&
this.chartViewRef.current.toDataURL(base64 => {
this.setState({
base64ImageData: base64,
});
});
This works well for Android. Packages version
'react-native' -> "^0.64.2",
"react-native-svg" -> "^12.1.1",
"react-native-chart-kit" -> "^6.11.0"
Did you find a solution? I need to do the same