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

1
  • hi! we have the same problem, do you already resolve this one? Commented Nov 15, 2020 at 5:27

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.