Highcharts export duplicating category labels

Question

I'm generating a series of highcharts and then exporting them to a pdf via jsPDF. They display fine on screen, but when I export an image of the graphs, it duplicates the X axis category labels.

Here is my chart code:

$('#chart').highcharts({
                chart: {
                    type: 'column',
                    spacingBottom: 0,
                    spacingTop: 20,
                    spacingLeft: 0,
                    spacingRight: 0
                },
                exporting: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: null
                },
                legend: {
                    enabled: false
                },
                xAxis: {
                    categories: ['Sales Performance',],
                    labels: {
                        style: {
                            color: '#000'
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        format: '{value}%',
                        overflow: 'justify',
                        style: {
                            color: '#000'
                        }
                    }
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                tooltip: {
                    valueSuffix: '%'
                },
                series: [{
                    name: '% Change',
                    color: '#c0504d',
                    data: [4.5]
                }]
            });

And an example of the issue: http://jsfiddle.net/212qb8qs/

Any ideas???

UPDATE:

The issue was with canvg converting the svg. Solved thanks to this comment: When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?

Take a look at this: [When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?](http://stackoverflow.com/q/28563073/2732991) — Halvor Holsten Strand, Apr 15 '15 at 15:50

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

Well, from your jsfiddle, you use canvg along with highcharts to get a canvas and then convert to PDF what you get. The problem comes from canvg wich seems to handle a bit strangely the tspan that are used in the SVG generated by highcharts (mostly for titles).

So I redirect you to my answer in another question here , where you'll find a dirty fix for that.

edited May 23 '17 at 12:08

Community

1
1

answered Apr 15 '15 at 15:59

Loufylouf

697
5
13

Thanks Loufylouf. Ondkloss directed me to your answer and that's solved it. Thanks very much! – Wiggy Apr 15 '15 at 16:22

Highcharts export duplicating category labels

1 Answers1