CODEWITHSUNDEEP
highcharts
rogeriolino
rogeriolino

Reputation: 1135

Pie chart: image exporting cutting off labels

I'm using Highcharts 3 pie chart and when I do export to image the generated chart are losing some data labels. How can I solve (workaround) this?

ps: Using highcharts server: export.hightcarts.com

Regards

[update]

Small values are cut off on generated image png file. However is ok in the print preview.

new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        type: 'pie'
    },
    title: { 
        text: 'My Chart title' 
    },
    plotOptions: {
        pie: {
            showInLegend: true,
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + Math.round(this.point.total * this.point.percentage / 100);
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Series name',
        data: [
            ["Lorem", 88],
            ["Lorem ipsum", 4],
            ["Praesent nibh nulla", 12],
            ["Lorem ipsum dolor sit amet", 66],
            ["Praesent fringilla suscipit molestie", 30],
            ["Donec at lectus at nulla viverra lobortis", 11],
            ["Class aptent taciti sociosqu ad litora", 87],
            ["Mauris vulputate sem id arcu volutpat fermentum", 149],
            ["Vestibulum faucibus lectus", 113],
            ["Pellentesque habitant morbi tristique", 7],
            ["Etiam lacinia mi suscipit", 92],
            ["Proin semper risus in lacus semper", 9],
            ["Fusce id faucibus massa", 99],
            ["Suspendisse", 4],
            ["Quisque quis lectus et turpis laoreet", 101]
        ]
    }],
    exporting: {
        enabled: true
    }
});

jsFiddle: http://jsfiddle.net/6afyH/1/

Upvotes: 2

Views: 3330

Answers (1)

Pierre Fourgeaud
Pierre Fourgeaud

Reputation: 14510

It is because Highcharts does not detect the width of the container.

You can fix that by adding the option sourceWidth in the exporting option :

exporting: {
    enabled: true,
    sourceWidth: 900
}

It seems that sourceWidth take the initial width so if the chart is a little bit truncated at the page loading, it will be the same at the exporting unless if you specified it in the options.

I updated the jsFiddle to give you an example of this working : http://jsfiddle.net/6afyH/2/

Upvotes: 7

Related Questions