CODEWITHSUNDEEP
javascriptcanvashighchartsjspdfcanvg
abenevaut
abenevaut

Reputation: 767

Export Highcharts to jsPDF - canvg error

I'm looking for a solution about highcharts export to PDF with jsPDF. I used this solution to export my graph as image to my pdf -> Export Highcharts to PDF (using javascript and local server - no internet connection)

It's working fine, but for some graph i could not generate the image because of this error :

Uncaught TypeError: undefined is not a function -- canvg.js:2000
svg.Element.text.getAnchorDelta -- canvg.js:2010
svg.Element.text.renderChild -- canvg.js:1989
svg.Element.text.renderChildren -- canvg.js:679
svg.Element.ElementBase.render -- canvg.js:698
svg.Element.ElementBase.renderChildren -- canvg.js:679
svg.Element.ElementBase.render -- canvg.js:698
svg.Element.ElementBase.renderChildren -- canvg.js:679
svg.Element.ElementBase.render -- canvg.js:2723
svg.loadXmlDoc.draw -- canvg.js:2733
svg.loadXmlDoc -- canvg.js:2646
svg.loadXml -- canvg.js:62
canvg -- indicateurs.js:3237
$.bind.H.Chart.createCanvas -- indicateurs.js:3171
(anonymous function) -- jquery-1.10.2.min.js:4
x.extend.each -- indicateurs.js:3164
_indicateurs.hightcharts.graph_to_pdf -- indicateurs.js:3262
(anonymous function) -- jquery-1.10.2.min.js:5
x.event.dispatch -- jquery-1.10.2.min.js:5
x.event.add.v.handle

Following, the canvas method throwing the error (canvg.js) :

        this.getAnchorDelta = function (ctx, parent, startI) {
            var textAnchor = this.style('text-anchor').valueOrDefault('start');
            if (textAnchor != 'start') {
                var width = 0;
                for (var i=startI; i<parent.children.length; i++) {
                    var child = parent.children[i];
                    if (i > startI && child.attribute('x').hasValue()) break; // new group
                    width += child.measureTextRecursive(ctx);       // ######## PROBLEM LOCATED ON THIS LINE
                }
                return -1 * (textAnchor == 'end' ? width : width / 2.0);
            }
            return 0;
        }

Any first ideas about what could be make this error ?

Upvotes: 1

Views: 2870

Answers (2)

samuellawrentz
samuellawrentz

Reputation: 1732

It is one of the common issues in HighCharts. This is due to the wrapped text that is found within the <title></title> tag. This usually occurs if your axis labels are too long and they are wrapped to multiple lines. The simple way to resolve this error is to remove all the title elements before exporting to PDF. This doesn't affect any part of your chart.

To remove the title element within your chart container, use JQuery

("#chart_container_id title").remove();

Insert this line at the beginning of the exporting module. Now try to export and this will work fine.

Upvotes: 2

Mar&#231;al Juan
Mar&#231;al Juan

Reputation: 1342

Use this bower package:

"canvg-gabelerner": "*"

And make sure you include these 3 dependencies:

<script src="bower_components/canvg-gabelerner/rgbcolor.js"></script>
<script src="bower_components/canvg-gabelerner/StackBlur.js"></script>
<script src="bower_components/canvg-gabelerner/canvg.js"></script>

The canvg bower package is old. It was created because original repo was stored on Google code service (now dead).

I hope it helps! :)

Upvotes: 2

Related Questions