React-chartjs-2 Doughnut chart export to png

Question

I have created a Doughnut and Bar chart using react-chartjs-2 library. Now I want to export this chart as png i.e the chart gets downloaded as png on user click. I have tried many ways but could not succeed. One of them was to use html2canvas library and get a screenshot but that is degrading the quality of chart. I am wondering is there any function in react-chartjs-2 library to directly export the chart?

Edit- If someone can tell me about any other library in javascript in which I can make the charts like Bar and Doughnut and that library gives me the function to directly export the chart, that would also be helpful.

Currently I am using html2canvas library and by using the div id in which the chart is rendered, I am setting my charts onto a canvas and then I am making available the canvas to be downloaded as png. But by using this method, the quality of chart is not good in png. I am looking for an function in the react-chartjs-2 library to export the chart. — Aditya Rai, May 27 '20 at 09:35
Have a look around chartjs base64 image. There is a method in chartjs and react-chartjs-2 is a wrapper for react. So either they will have implemented the function or you can call the chartjs function itself. — Sam, May 27 '20 at 12:31
Thanks. It helped and I was able to do it using .toBase64Image() function from react-chartjs-2 library itself. Thanks again. — Aditya Rai, May 27 '20 at 17:04

score 2 · Answer 1 · answered Aug 05 '20 at 23:30

If you are using react-chartjs-2 library, you need to get a ChartJS instance reference and then call .toBase64Image() as the other answer suggested. To do that, first create an empty reference:

const chartRef = useRef(null);

Then, assing the reference. For example, if you are using a Bar chart:

<Bar data={data} ref={chartRef}/>

Finally, get the base64 image using the reference. Remember to call .current.chartInstance before toBase64Image():

const base64Image = chartRef.current.chartInstance.toBase64Image();

score 1 · Accepted Answer · answered Jun 15 '20 at 18:31

1

I was able to do it using .toBase64Image() function from react-chartjs-2 library itself.

answered Jun 15 '20 at 18:31

Aditya Rai

21
5

how did you do that? – koubin Dec 31 '21 at 11:32

score 0 · Answer 3 · answered Apr 13 '22 at 06:46

I was able to download the react-chartjs-2 Bar Chart by using the code below. The solution is for the Class component. If you are using a functional component, you can watch this video: https://www.youtube.com/watch?v=KuWLhLFfeRc

class BarChart extends React.Component {

constructor(props){
        super(props);

        this.myRef = React.createRef();
}

clickHandler() {
        const link = document.createElement('a');
        link.download = "chart.jpeg";
        link.href = this.myRef.current.toBase64Image('image/jpeg', 1);
        link.click();
}

render(){
     return(
            <div>
                <button value='print' onClick {this.clickHandler.bind(this)}>Print</button>
                <Bar 
                data={data} 
                options={options}
                ref={this.myRef}
                />
            </div>
        );
    }
}
export default BarChart;

React-chartjs-2 Doughnut chart export to png

3 Answers3

Linked