How to call react-apexcharts in react-pdf

Question

I am using react-pdf to convert some react components to pdf. I converted some table and some images to pdf.

I also have react-apexcharts in my components and I want to add this react-apexcharts component into my pdf.

My Graph component looks like this:

render() {
  return (
    <View id="chart">
      <Text> This is graph component </Text>
      <Chart options={this.options} series={this.series()}
        type="area" height="350"
      />
    </View>
  )
 }

series is just an array object like this:

series() {
  return [
  {
    name: Props1,
    data: generateDayWiseTimeSeries(this.props.props1)
  },
  {
    name: Props2,
    data: generateDayWiseTimeSeries(this.props.props2)
  }
]
}

In My Graph component I convert div and other html tags to react-pdf tags like Page, View, Text. But I am getting this error: 'The above error occurred in the component: '. I think this is because of 'Chart' component that has inbuilt div and other html tags.

Is there any method to convert this components tags to react-pdf components so that graph can be displayed. Or take a snapshot of the graph component on page load and call it where I want to render it in the pdf.

Or is there any other effective way to do this? I hope you understood my problem :)

Answer 1

Even I had to do something like this. You can firstly generate the apex chart by providing a unique chart id to each chart(using options -> chart -> id field) and then you can use below to fetch the chart URL using the chart id which you gave to generate the chart. This chart URL can be provided in the src attribute of the Image tag in react pdf.

Note that getDataUri method will return the promise object and you will have to resolve it before using that in the Image tag.

 const getDataUri = async (chartId) => {
        return await ApexCharts.exec(chartId, "dataURI").then(({ imgURI }) => {
            return imgURI;
        });
    }

<Image src={chartURL} />