CODEWITHSUNDEEP
javascriptpng
Aditya Rai
Aditya Rai

Reputation: 51

React-chartjs-2 Doughnut chart export to png

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.

Upvotes: 2

Views: 6907

Answers (4)

ka_lin
ka_lin

Reputation: 9432

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} />} />

Upvotes: 0

Kruti Patel
Kruti Patel

Reputation: 21

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;

Upvotes: 2

Juan Garc&#237;a
Juan Garc&#237;a

Reputation: 1878

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

Upvotes: 3

Aditya Rai
Aditya Rai

Reputation: 51

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

Upvotes: 3

Related Questions