3

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! :)

lpcuellar
  • 75
  • 4

0 Answers0