Using the dataURI method, I am not getting any color for the series of my pie chart

Question

I have the following code running:

var options = {
    chart: {
        type: 'donut',
        fontFamily: 'Lato Light'
        },
    series: [1,2,3,4,5],
    labels: ['1','2','3','4','5'],
    theme: {
        monochrome: {
            enabled: true,
            color: '#b19254',
            shadeTo: 'dark',
            shareIntensity: 0.15
        }
    },
    //colors: ['#b19254', '#9f834c', '#8e7543', '#7c663b', '#b99d65', '#c8b387'],
    legend: {
        position: 'bottom'
        },
    plotOptions: {
        pie: {
            donut: {
                labels: {
          show: true,
            name: {
                show: false
            },
          value: {
              offsetY: -1,
              show: true
            },
          total: {
              show: false,
                            showAlways: false,
                            formatter: function (w) { return String(Math.round(chart.w.globals.seriesTotals.reduce((a,b) => { return a+b}, 0) * 100) / 100) + ' ' + $currency}
            }
          }
            }

        }
    },
}

    var chart = new ApexCharts(document.querySelector("#investment-chart-wrapper"), options);
    chart.render();

    var $chartData = chart.dataURI();
    $chartData.then(
        (result) => {
            document.querySelector('#chartimg').setAttribute('src',result.imgURI);
    });

The bit I am fighting with is the promise result of the dataURI() method from here.

For some reason, the chart I get has all the information including the series labels, but the color for the series does not show, leaving me with this. The color is used for the legend at the bottom, however.

I am sure I am missing something here. Please let me know what.

Answer 1

I was running into this problem as well today. It was because the animation of the chart has not taken place yet. You have to get the dataURI() after it has fully rendered or turn off the chart animation. I was able to get this working by setting the rendered chart to a variable at the top of my js file and then using it in a function like this:

function SetChartImage() {
    chartHistoricalPCTArea.dataURI().then(({ imgURI }) => {
        var image = document.querySelector('#HistoricalPCTImage');
        image.src = imgURI;
    })
}