d3js charts axes don't appear

[sabrioezer]

I am using jspdf to create pdf documents of pages with charts created by using d3js. The problem is the axes of charts are not shown on pdfs. Here a picture of a chart:

And the pdf by jspdf: test.pdf

The code for the pdf-creation:

public createPdf2() {
    const svgElem = document.getElementById('svg-container');

    const canvas = document.createElement('canvas');
    canvas.width = svgElem.clientWidth;
    canvas.height = svgElem.clientHeight;

    const ctx = canvas.getContext('2d');
    ctx.scale(1, 1);

    canvg(canvas, svgElem.innerHTML, {ignoreDimensions: true});

    const x = document.getElementById('svg-content-responsive');
    svgElem.removeChild(svgElem.lastChild);
    svgElem.appendChild(canvas);

    const doc = new jsPDF('l', 'px', 'a4');
    doc.addImage(canvas.toDataURL('image/png'), 'PNG', -20, 0, canvas.clientWidth / 2 , canvas.clientHeight / 2);
    doc.save('test.pdf');

    svgElem.removeChild(svgElem.lastChild);
    svgElem.appendChild(x);
}

The graphs without axis are rendered ok but with axes I had some problem.

Thanks for the help

[sabrioezer]

I realized that the problem is with creating canvas.

[halmisha]

Hi @sabriozer33

I am also facing similar issue axes don't appear while creating d3js charts.

Below is my code for generating pdf

createPDF() { let id = ''; if(category == 'StackBarChart') { id = 'stacked-bar-chart'; } else if(category == 'DetailStackBarChart') { id = 'detail-stacked-bar-chart'; } let svg = document.getElementById(id).innerHTML;

if (svg)
  svg = svg.replace(/\r?\n|\r/g, '').trim();

let canvas = document.createElement('canvas');
canvg(canvas, svg);
let imgData = canvas.toDataURL();

var doc = new jsPDF('l', 'pt', [1020, 768]);
doc.addImage(imgData, 'PNG', 0, 0, 1020, 768);
doc.save(id+'.pdf');

}

verticalBarChart.pdf

Can you please help me, where exactly i am making mistake while creating canvas.

Thanks in advance!!!

[halmisha]

Hi @sabriozer33 ,

Can you please let me know your approach to resolve the issue you have faced for d3js charts axes don't appear.

Thanks in advance.

[vincetm]

I realized that the problem is with creating canvas.

Hi @sabrioezer @halmisha , I faced the same problem, could you please tell how to solve it?

Thanks in advance.