title: Using react-pdf with react-chartjs-2 to generate a pdf
body: <p>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.</p>
  <p>The page I am trying to convert has a structure like this:</p>
  <pre><code>&lt;section className={classes.dashboardContainer}&gt;
            &lt;PerfectScrollbar&gt;
              &lt;Grid container classes={{ root: classes.dashboardDetails }}&gt;
                &lt;Grid item xs={12} lg={8} classes={{ root: classes.dashboardDetailsLeft }}&gt;
                  &lt;ChartOne
                    isLoading={isLoading}
                    totalItems={state &amp;&amp; state.chartOneData}
                  /&gt;
  
                  &lt;ChartTwo
                    isLoading={isLoading}
                    data={metrics ? chartTwoData : undefined}
                  /&gt;
  
                  &lt;ChartThree
                    isLoading={isLoading}
                    data={metrics ? chartThreeData: undefined}
                  /&gt;
  
                  &lt;ChartFour
                    isLoading={isLoading}
                    data={metrics ? chartFourData : undefined}
                  /&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
            &lt;/PerfectScrollbar&gt;
          &lt;/section&gt;
  </code></pre>
  <p>Inside the chart components there are a few different types of charts below is an example:</p>
  <pre><code>
              &lt;section className={classes.barChartContainer}&gt;
                &lt;div&gt;
                  &lt;HorizontalBar
                    data={chartData}
                    height={50}
                    options={chartOptions({ beginAtZero: true, stacked: true, xAxesMax })}
                  /&gt;
                &lt;/div&gt;
              &lt;/section&gt;
  </code></pre>
  <p>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?</p>
  <p>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...</p>