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/
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 onchart.plotOptions.series.animation = false
.Disable all animations, and make sure you have up-to-date exporting server, not some old one.
Also, set defer options to false.
I had the same problem. I tried all options above. Set all
animation
options tofalse
, alldefer
options tofalse
, 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 ofHighcharts
.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.