The problem
I have created the following graph with highcharts (see: http://www.highcharts.com/). It is combo chart (stacked column chart with line chart) and the resulting page looks (see below) as intended.
I was also very happy to see that there is a context menu included on the top right of the chart, which allows to export or print the graph. When exporting the file to different formats, the stack labels come out false. Only the SVG file produced looks exaclty like the original graph. Is this known behavior and how yould I fix it?
Reproducible example
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Chart
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Example'
},
xAxis: {
type : 'datetime',
categories: ['2013-2', '2013-3', '2013-4', '2014-1', '2014-2']
},
yAxis: {
min: -5,
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
labels: {
items: [{
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'A',
data: [3, 2, 1, 3, 4],
color : '#00786b'
}, {
type: 'column',
name: 'B',
data: [2, -3, 5, 7, 6],
color : '#5e7c8f'
}, {
type: 'column',
name: 'Arbeitsmarkt',
data: [4, 3, 3, 9, 0],
color: '#b7c7cf'
}, {
type: 'column',
name: 'C',
data: [4, 2, 6, -2, 0],
color: '#cd965f'
}, {
type: 'line',
name: 'D',
data: [9, 2, 9, 19, 10],
color: 'black',
marker: {
lineWidth: 2,
lineColor: 'black',
fillColor: 'white'
}
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
