Why is that my when I append and export my highchart through pdf its blurry? The resolution is bad

Question

I'm trying to export my table and highchart into 1 pdf document on the click of export button but my highchart resolution is always bad, I also tried resizing the size and width of it and turning off the animations :

$('.export-button').on('click', function () { var doc = new jsPDF();

            // Export table
            doc.autoTable({ html: '#StatTable' });

            // Export highchart
            var chartSVG = $('#container1').highcharts().getSVG();
            var canvas = document.createElement('canvas');
            canvas.width = $('#container1').width() * 5; // Five times the width
            canvas.height = $('#container1').height() * 5; // Five times the height
            canvg(canvas, chartSVG);
            var chartDataURL = canvas.toDataURL('image/png');
            doc.addImage(chartDataURL, 'PNG', 10, 100, 180, 100);

            // Save document
            doc.save('table_and_chart.pdf');
        });

Answer 1

Here is the exported image the text on the highcharts is being captured but the highcharts is not.