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.

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.

• javascript
• pdf-generation
• jspdf
• apexcharts

• Reformat code into a code block. Changed and corrected text as much as I could understand the question. – Léa Gris Commented Sep 11, 2019 at 18:40
• Léa Gris it's corrected now graph is created but for download its gives error when fetching uri – Muhammad Nouman Commented Sep 11, 2019 at 21:38
• I did not change your code functioning, just reformatted your question so it was more understandable and give you more chance to get help for your PDF output. – Léa Gris Commented Sep 11, 2019 at 21:40
• Léa Gris yes i removed some code for creation of chart becuase due to that it was created two times Please help me to sort out this error i can't fetch the uri of chart recieving this error chart.dataURI is not a function – Muhammad Nouman Commented Sep 11, 2019 at 21:57
• Can Anyone Help me out of this issue – Muhammad Nouman Commented Sep 12, 2019 at 7:38

2 Answers 2

Below is a solution with some additional code that helps us to render the chart to fit nicely within the frame of the pdf file. My previous attempts did render the chart but the chart did not fill the page with nasty white uneven borders to the side and bottom.

The 'chart' reference is based upon getting the actual instance of th current chart once rendered...

Dont forget to load the jsPDF library in the header section of the web page:

<script src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

I call the function below from a button along the navbar just above the div element where I render the chart. Note I called the div element a 'chartCanvas' but it's not actually a canvas element, it's just a div with my own class parameters.

function downloadChartToPdf() {
    if (chart) {
        var canvas = document.getElementById("chartCanvas");
        var width = canvas.clientWidth;
        var height = canvas.clientHeight;
        console.log(width); // testing only...
        console.log(height); // testing only...
        // ----- Not currently in use... -----
        //var rect = canvas.getBoundingClientRect();
        //console.log(rect.width); // testing only...
        //console.log(rect.height); // testing only...
        // -------------------------------------------

        chart.dataURI().then(({ imgURI, blob }) => {
            //set the orientation
            if (width > height) {
                console.log("landscape"); // testing only...
                let pdf = new jsPDF('l', 'px', [width, height]);
                pdf.backgroundColor = '#BFBFBF';
                //then we get the dimensions from the 'pdf' file itself
                width = pdf.internal.pageSize.getWidth();
                height = pdf.internal.pageSize.getHeight();
                widthWithPadding = width - 20;
                heightWithPadding = height - 20;
                pdf.addImage(imgURI, 'PNG', 10, 10, widthWithPadding, heightWithPadding);
                pdf.save("chart.pdf");
            }
            else {
                console.log("portrait"); // testing only...
                let pdf = new jsPDF('p', 'px', [height, width]);
                pdf.backgroundColor = '#BFBFBF';
                //then we get the dimensions from the 'pdf' file itself
                width = pdf.internal.pageSize.getWidth();
                height = pdf.internal.pageSize.getHeight();
                widthWithPadding = width - 20;
                heightWithPadding = height - 20;
                pdf.addImage(imgURI, 'PNG', 10, 10, widthWithPadding, heightWithPadding);
                pdf.save("chart.pdf");
            }
        })
    }
}

Exported PDF result:

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