React-chartjs-2: Feature request: toBase64Image

[volkandkaya]

The ability to use base64 would be very helpful.

https://github.com/reactjs/react-chartjs/blob/master/lib/core.js

Them seem to have it in extras.

[andrewkchan]

Best to do this by getting a ref of the Chart component? That way we can just add a wrapper function to the Chart class that just calls the underlying chartjs function.

[volkandkaya]

I am currently using https://gist.github.com/volkandkaya/a2a34e4a8f7f88a17b4f8aff7d35557c. It is a copy with a lot of the props out.

[andrewkchan]

Actually, I think you can obtain a ref to the internal chartjs chart instance already. See the readme (I'm on mobile so can't link to section):

https://github.com/gor181/react-chartjs-2/blob/master/README.md

And once you have an instance you can just call the .toBase64Image function on it.

[3ll3d00d]

You can certainly do this today.

You can get the URL via the animation.onComplete config option like

handleURL = (anim) => {
    const url = this.refs.chart.chart_instance.toBase64Image();
    // do something with the URL
}

you can then pass that to URL up to some component that provides a download link

I have also found you need something like this

componentWillMount = () => {
    // required for png export as per https://github.com/chartjs/Chart.js/issues/2830
    Chart.plugins.register({
        beforeDraw: (chartInstance) => {
            const ctx = chartInstance.chart.ctx;
            ctx.fillStyle = this.props.customChartConfig ? this.toRGBA(this.props.customChartConfig.colours.background) : 'white';
            ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
        }
    });
};

otherwise you get a black background

[kumarsunny0013]

Hi,

I am facing same issue while using toBase64Image() in react-chart2. Im not getting any data. Can please let me know whether this functionality is available in react-chart2 or not.

i tried this, calling the done() function onComplete of animation. but im getting only "data:,".
Can anyone help?
done = () => {
let chart = this.refs.mychart.chartInstance;
console.log(chart.toBase64Image(chart));
}

[moffsugita]

It should be written in doc

or

options{
    animation: false
}

option

[jdgarcia1381]

You need to get a ChartJS instance reference and then call .toBase64Image(). 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();