Data label image study series stacked
HTML
<script src="http://github.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 600px"></div>
CSS
.myImage {
width: 40px;
height: 30px;
}
JavaScript
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'column'
},
plotOptions: {
series: {
stacking: 'normal',
stickyTracking: true,
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
var img = {
'Netherlands': '<img class="myImage" src="https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/75/country-4x3/nl.png"/>',
'Germany': '<img class="myImage" src="https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/75/country-4x3/de.png"/>',
'France': '<img class="myImage" src="https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/75/country-4x3/fr.png"/>',
}[this.series.name];
return img + '<br/>' + this.y;
}
}
}
},
xAxis: {
categories: ['2012', '2013', '2014']
},
yAxis: {
//max:150
},
series: [{
name: 'Netherlands',
data: [101, 85, 70]
}, {
name: 'Germany',
data: [52, 103, 88]
}, {
name: 'France',
stacking: null,
data: [52, 103, 88]
}]
});
});