Data label image study

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 =   {
                            
                            'A': '<img class="myImage"  src="https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/75/country-4x3/nl.png"/>',
                                'B': '<img class="myImage" src="https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/75/country-4x3/us.png"/>',
                                'C': '<img class="myImage" src="https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/75/country-4x3/au.png"/>'
                        }[this.x];
                        return img +  this.y  ;
                    }
                }
            }
        },

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

        credits: {
            enabled: false
        },

        series: [{

            data: [101, 85, 70]
        }]

    });
});