Data label image study PIE

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: 'pie'
            //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"/>',
                            'Usa': '<img class="myImage" src="https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/75/country-4x3/us.png"/>'
                        }[this.point.name];
                        return img +   this.y ;
                    }
                }
            }
        },

        credits: {
            enabled: false
        },

        series: [{
            data: [
                ['Netherlands', 44.2],
                ['Germany', 26.6],
                ['Usa', 20]
            ]
        }]

    });
});