Search code examples
d3.jshtml2canvas

Text alignment changes on exporting d3js chart svg as png using html2canvas

I've created circle pack chart using D3js version 3 and following is the snapshot of the chart.

enter image description here

I'm trying to export it using html2canvas using following code:

html2canvas(document.getElementById("chart"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

Here, chart is the id of div element that holds the chart svg which I'm trying to export as png. The above code works fine and successfully returns the png image but the alignment and font setting of the text which is inside the svg changes as in following snapshot.

enter image description here

Can anyone please suggest me how can I export chart image as png with the same text settings.

Please also note that I've used the following js files for this.

d3.v3.js

html2canvas.js

html2canvas.svg.js

Thanks in advance.
Bhagyesh

Solution

  • You're probably setting styles in css which htm2canvas doesn't have access to and therefore doesn't apply. If you set everything as attributes of the svg instead, it should work.