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>
);
};
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>
);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.