I'm trying to export a chart created with react-native-chart-kit to a PDF document with expo-print. I'm having a hard time trying to do so. I can't find the way to render the chart inside the PDF, it only puts text with the chart description.
Here's the code that I'm using:
...
const createPDF = async() => {
const html = `<View style={styles.formContainer}>
<LineChart
style={styles.graphStyle}
data={{
labels: reportData.sale,
datasets: [
{
data: reportData.sale.map(i => reportData.saleById[i]['total'])
}
]
}}
width={Dimensions.get("window").width}
height={Dimensions.get("window").height * 0.55}
yAxisLabel="Q."
chartConfig={chartConfig}
verticalLabelRotation={45}
/>
</View>`;
const { uri } = await Print.printToFileAsync({html});
Sharing.shareAsync(uri);
};
return (
<View style={styles.formContainer}>
<LineChart
style={styles.graphStyle}
data={{
labels: reportData.sale,
datasets: [
{
data: reportData.sale.map(i => reportData.saleById[i]['total'])
}
]
}}
width={Dimensions.get("window").width}
height={Dimensions.get("window").height * 0.55}
yAxisLabel="Q."
chartConfig={chartConfig}
verticalLabelRotation={45}
/>
</View>
<View>
<Button
theme={roundness}
color={'#000000'}
icon={"chart-bar"}
height={50}
mode="contained"
labelStyle={{
fontFamily: "dosis-bold",
fontSize: 15,
}}
style={{
fontFamily: 'dosis',
marginLeft: '5%',
marginRight: '5%',
justifyContent: 'center',
}}
onPress={ createPDF }
>
{'CREAR PDF'}
</Button>
</View>
);
...
Thank you all for your help! :)