How can I get a URI from ApexCharts to download in PDF?

Question

I already implemented an ApexCharts and want to output it into a PDF document.

I tried to get a download URI from chart.dataURI , but it failed with an error:

chart.dataURI is not a function

Below is the creation of the Apex bar graph and my attempt with the download URI, but it does not fetch:

var options = {
  chart: {
    height: 450,
    type: 'bar',
    width: 1000,
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '40%',
      endingShape: 'rounded'
    },
  },
  dataLabels: {
    enabled: false
  },
  colors: ['#008000', '#d4a823', '#f92525'],
  stroke: {
    show: true,
    width: 2,
    colors: ['transparent']
  },
  series: [{
    name: 'Good',
    data: JSON.stringify(graph_data.good)
  }, {
    name: 'Okey',
    data: JSON.stringify(graph_data.ok)
  }, {
    name: 'Bad',
    data: JSON.stringify(graph_data.bad)
  }],
  xaxis: {
    categories: graph_data.month,
  },
  yaxis: {
    title: {
      text: 'Smiley Percentage'
    }
  },
  fill: {
    opacity: 1

  },
  tooltip: {
    y: {
      formatter: function(val) {
        return val + " Smileys"
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector("#monthlyhistory"), options);
var dataURL = chart.dataURI().then((uri) => {  // Here shows an error
  console.log(uri);
  var pdf = new jsPDF();
  pdf.addImage(uri, 'PNG', 0, 0);
  pdf.save("download.pdf");
})}

I expect the output in PDF format, but it is not working.

Answer 1

Before calling the chart.dataURI() function, you need to render the chart (which I cannot find in your question)

The render function returns a promise, so you can chain any additional code in the then() handler of it.

Like this.

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render().then(() => {
    chart.dataURI().then(({ imgURI, blob }) => { 
        var pdf = new jsPDF();
        pdf.addImage(imgURI, 'PNG', 0, 0);
        pdf.save("download.pdf");
    })
})

Here is the working codepen demo