Search code examples
javascriptpdfexport-to-excelchart.js

How to export a chart in Excel and PDF format using Chart.js


I have tried to create a sample to demo the Charts using Chart.js. I am able to do it very well. Now I want to export this Chart to Excel and PDF.

Or is it possible to do so using Chart.js

Here's my JavaScript code:

function TyLyReport(){
    var barChartData = {
        labels : ["Jan","Feb","Mar"],
        datasets : [
            {
                fillColor : "#616161",
                highlightFill: "#616161",
                data : [1000,2000,2500]
            },
            {
                fillColor : "#FF4848",
                highlightFill: "#FF4848",
                data : [1016,1800,2900]
            }
        ]
    }
    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            responsive : true,
            scaleOverride: true,
            scaleSteps: 3,
            scaleStepWidth: 1000,
            scaleStartValue: 0,
            scaleShowLabels: true,
            barValueSpacing : 30
        });
    }
}

Here's my HTML code:

<div style="width: 80%">
    <canvas id="canvas" class="reportbox"></canvas>
</div>
<script>
    TyLyReport();
</script>

Can I do so using this Chart.js?

If yes, please suggest the probable solution or if no, please tell me if there's any open source tool to do so.

Thanks a lot in advance.


Solution

  • Chart.js doesnt support conversion to pdf but you can convert it to image by using following code

    function done() {
        console.log('done');
        var url=document.getElementById("page").toDataURL();
        document.getElementById("url").src=url;
    }
    

    In options you have to set the following :

    onAnimationComplete: done