I've looked around quite a bit but I can't seem to find any examples of the use of these 2 libraries together. My project currently uses react-pdf to generate pdf reports but I need to add chartjs charts to some of the new files we'll be generating. I would prefer not to have to use two different pdf libraries and have to re-code parts of the application to match 2 standards. If there is a different library that can get the job done I would be open to suggestions.
The page I am trying to convert has a structure like this:
<section className={classes.dashboardContainer}>
<PerfectScrollbar>
<Grid container classes={{ root: classes.dashboardDetails }}>
<Grid item xs={12} lg={8} classes={{ root: classes.dashboardDetailsLeft }}>
<ChartOne
isLoading={isLoading}
totalItems={state && state.chartOneData}
/>
<ChartTwo
isLoading={isLoading}
data={metrics ? chartTwoData : undefined}
/>
<ChartThree
isLoading={isLoading}
data={metrics ? chartThreeData: undefined}
/>
<ChartFour
isLoading={isLoading}
data={metrics ? chartFourData : undefined}
/>
</Grid>
</Grid>
</PerfectScrollbar>
</section>
Inside the chart components there are a few different types of charts below is an example:
<section className={classes.barChartContainer}>
<div>
<HorizontalBar
data={chartData}
height={50}
options={chartOptions({ beginAtZero: true, stacked: true, xAxesMax })}
/>
</div>
</section>
it's all just barCharts coming from the react-chartjs-2 library. I can't seem to figure out how to convert these to PDF using the react-pdf library. Is there a library that would work better for this task?
The only solution I can think of is to use refs to grab the canvas elements of each chart and then use jsPdf to convert those to imgs to embed in the doc...
