Apexcharts.js: Method dataURI() returns a blank chart as the base64

[jeanmmayer]

Hello, i'm using dataURI method to get the base64 to use with jsPDF.

My chart:

dataURI generated: https://paste.in/6llDep
dataURI image:

My javascript code:

var options = {
    chart: {
        width: '100%',
        height: '400px',
        type: 'pie'
    },
    labels: chartLabels,
    series: chartData,
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                size: '100%'
            },
            legend: {
                position: 'bottom'
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val + "%"
                }
            }
        }
    }]
};

chart = new ApexCharts(
    document.querySelector("#myChart"),
    options
);

chart.render();

var dataURL = chart.dataURI().then((uri) => {
    console.log(uri);
});

Am i doing something wrong?

Best regards.

[junedchhipa]

You should wait for the animation to complete before you can grab the image.

Hence, you should put your dataURI() function after render() has finished.

chart.render().then(() => {
    window.setTimeout(function() {
        chart.dataURI().then((uri) => {
            console.log(uri);
        })
    }, 1000) 
})

I have put a timer currently, as chart resolves promise before the animation ends. I will fix this bug and then you won't have to use the timer.

[jeanmmayer]

Thank you so much for your support.

It's working now.