CODEWITHSUNDEEP
reactjschartsreact-chartjs
Rokas Simkus
Rokas Simkus

Reputation: 63

Is there a way to convert react-chartjs-2 chart to pdf?

I'm using a library called reactChartJs2 and there is a proposal to make charts downloadable is there a way to convert a chart to PDF or any other format?

Upvotes: 1

Views: 7372

Answers (2)

Prajwal m
Prajwal m

Reputation: 11

I got an error saying pdfconverter is not a function. I just added import jsPDF from "jspdf" at the top and instead of const pdf = new pdfConverter("l", "pt");.

I wrote const pdf = new jsPDF("l", "pt"); and now it works.

Upvotes: 1

Babak Yaghoobi
Babak Yaghoobi

Reputation: 1985

This is sample code using react-chartjs-2 you need to install :

npm i html2canvas

and

npm i jspdf

Code:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Bar } from "react-chartjs-2";
import html2canvas from "html2canvas";
const pdfConverter = require("jspdf");

class Chart extends Component {
  cData = {
    labels: ["L 1", "L 2", "L 3", "L 4", "L 5"],
    datasets: [
      {
        label: "Label",
        data: [100, 150, 123, 170, 162],
        backgroundColor: ["red", "green", "yellow", "blue", "orange", "red"]
      }
    ]
  };

  div2PDF = e => {
    /////////////////////////////
    // Hide/show button if you need
    /////////////////////////////

    const but = e.target;
    but.style.display = "none";
    let input = window.document.getElementsByClassName("div2PDF")[0];

    html2canvas(input).then(canvas => {
      const img = canvas.toDataURL("image/png");
      const pdf = new pdfConverter("l", "pt");
      pdf.addImage(
        img,
        "png",
        input.offsetLeft,
        input.offsetTop,
        input.clientWidth,
        input.clientHeight
      );
      pdf.save("chart.pdf");
      but.style.display = "block";
    });
  };

  render() {
    return (
      <div>
        <div className="div2PDF">
          <Bar
            data={this.cData}
            options={{
              title: {
                display: true,
                text: "Chart to PDF Demo",
                fontSize: 32
              },
              legend: {
                display: true,
                position: "right"
              }
            }}
            height={200}
          />
        </div>
        <div>
          <button onClick={(e) => this.div2PDF(e)}>Export 2 PDF</button>
        </div>
      </div>
    );
  }
}

export default Chart;

ReactDOM.render(<Chart />, document.getElementById("root"));

Answer output : HERE

Upvotes: 7

Related Questions