Data label image study series

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

CSS

.myImage {
    width: 40px;
    height: 30px;
}

JavaScript

$(function () {
    $('#container').highcharts({

        chart: {
            renderTo: 'container',
            type: 'column'
            //backgroundColor: 'wheat'
        },

        plotOptions: {
            series: {
                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"/>'
                        }[this.series.name];
                        return img +  this.y  ;
                    }
                }
            }
        },

        xAxis: {
            categories: ['A', 'B', 'C']
        },
        yAxis: {
            //max:150
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Netherlands',
            data: [101, 85, 70]
        }, {
            name: 'Germany',
            data: [52, 103, 88]
        }]

    });
});