CODEWITHSUNDEEP
highcharts
Ash
Ash

Reputation: 21

Highcharts: phantomjs export image missing labels

My chart is a stacked bar chart with requirements to have data labels on the actual bars.

The in browser version is working perfectly featuring the data labels accordingly, however the exported image does not have them.

Here is my code:

{
  colors: ['#0EAC55','#91C855','#F3BA0E','#F39595','#F30E0E'],
       chart: {
                type: 'bar',
                height: 195
            },
            credits: {
            enabled: false
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: ['Category 1', 'Category 2', 'Category 3'],
            },
             tooltip: {
                valueSuffix: '%'
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                max: 100,
                opposite: true,
            },
            legend: {
                backgroundColor: '#FFFFFF'
            },

            plotOptions: {
                series: {
                    stacking: 'percent',
                    groupPadding: 0,
                    dataLabels: {
                    enabled: true,
                    color: '#000000'

                    }
                }
            },
                series: [{"name":"5","legendIndex":5,"data":[41.1,44.2,60.2]},{"name":"4","legendIndex":4,"data":[42.9,38.4,25.2]},{"name":"3","legendIndex":3,"data":[12.2,12,8.8]},{"name":"2","legendIndex":2,"data":[3.3,5,3]},{"name":"1","legendIndex":1,"data":[1,1,3.3]}]
    }

I am using the phantomjs server to produce images as these need to be generated on the server side. http://www.highcharts.com/component/content/article/2-articles/news/56-improved-image-export-with-phantomjs/

Upvotes: 2

Views: 1473

Answers (3)

Turdaliev Nursultan
Turdaliev Nursultan

Reputation: 2576

I had the same problem. I tried all options above. Set all animation options to false, all defer options to false, but it didn't help me to solve the problem.

Finally I found an issue on github.com. And it was a bug of HighCharts. I was using 4.0.1 version of Highcharts.

So, the solution is just to update your highcharts file to the lastest version if the suggestions above didn't work.

My sample code can be found on jsfiddle.

Upvotes: 1

rodp82
rodp82

Reputation: 285

Expanding on the answer given by Pawel Fus, I found that making sure animation was set to false did make a difference, but not the at the overall level (i.e. chart.animation = false), it had to be set on chart.plotOptions.series.animation = false.

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

Disable all animations, and make sure you have up-to-date exporting server, not some old one.

Also, set defer options to false.

Upvotes: 0

Related Questions