javascript - React-chartjs-2 Doughnut chart export to png - Stack Overflow

admin管理员组

文章数量:1291000

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.

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.

• javascript
• png

Share Improve this question Follow edited May 27, 2020 at 9:42 Aditya Rai asked May 27, 2020 at 9:22 Aditya RaiAditya Rai 5111 silver badge66 bronze badges 4

• What have you tried so far? Give us examples – Sam Commented May 27, 2020 at 9:27
• 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 Commented May 27, 2020 at 9: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 Commented May 27, 2020 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 Commented May 27, 2020 at 17:04

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

I was able to download the react-chartjs-2 Bar Chart by using the code below. The solution is for the Class ponent. If you are using a functional ponent, you can watch this video: https://www.youtube./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;

I know it's late but stumbled upon this as well and want to give you my code which exports at full quality

export const ChartExport = (props: { chart: React.ReactNode; title?: string }) => {
    const chartRef = useRef(null);

    const chartWithRef = React.cloneElement(props.chart, { ref: chartRef });

    const handleDownload = () => {
        const link = document.createElement('a');
        link.download = (props.title ? props.title : 'chart') + '.jpeg';
        link.href = chartRef.current.toBase64Image('image/jpeg', 1); // Here is the magic
        link.click();
    };

    return (
        <div>
            <button onClick={handleDownload}>
                Download JPEG
            </button>
            {chartWithRef}
        </div>
    );
};

Usage

<ChartExport title="My awesome chart" chart={<Bar data={myChartDataObj} options={chartOptionsObj} />} />

本文标签： javascriptReactchartjs2 Doughnut chart export to pngStack Overflow