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.

Answer 1

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

Answer 2

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();

Answer 3

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;