How to print react-chartjs-2 bar chart in browser using functional component?

Question

Here is an example of Bar Chart. I want to print this bar chart in browser, for that i tried react-to-print but it is throwing error like react-to-print only works with class components.

import React from "react";
import { Bar } from "react-chartjs-2";

// dataset for bar chart
const data = {
  // goes onto X-axis
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      
      label: "My First dataset",
      fill: false,
      // background color 
      backgroundColor: "rgba(75,192,192,0.4)",
      // border color 
      borderColor: "rgba(75,192,192,1)",
      // goes onto y-axis
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};


const options={
  //options for bar chart 
};

export const BarDemo = () => {
  return (
    <div>
      <h2>Bar Example</h2>
      <Bar data={data} />
    </div>
  );
};

kritiverma · Accepted Answer · 2021-05-21T16:48:20.050

I tried so many things to overcome this problem while working on one of my project. Finally came up with solution,maybe it helps someone.

Firstly I created Bar chart using functional components as you can see above given example.

So, Here goes the final code for asked question.

Thanks me anytime :)

import React,{useRef} from "react";
// import class component
import BarComponent from './BarComponent';

const data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First dataset",
      fill: false,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};

const options={
  //options for bar chart 
};

export const BarDemo = () => {

  const componentRef = useRef();

  return (
    <div>
      <h2>Bar Example</h2>
      //instead of using Bar directly,we will create a class component.
      <BarComponent ref={componentRef} data={data} options={options}/>
    </div>
  );
};


// here goes the class Component somethings like this.
import React from 'react';
import {Bar} from 'react-chartjs-2';

class BarComponent extends React.PureComponent {

  componentRef = React.createRef();

  render() {
    return (
        <div>
            <Bar ref={this.componentRef} id="Bar" data={this.props.data} options={this.props.options}/>
        </div>
    );
  }
};
export default BarComponent;


// we can pass the ref of BarComponent as props to the print functional component something like this

import React from 'react';
import { useReactToPrint } from "react-to-print";

export const Print = ({componentRef}) =>{
    
    // it will print the bar chart
    const handlePrint = useReactToPrint({
       content: () => componentRef.current
    });

    return(
      <button onClick={handlePrint}> Print </button>
    );
};

How to print react-chartjs-2 bar chart in browser using functional component?

1 Answers1