JSFiddle - React, Tailwind, and code Playground

Device penetration between 2012-2017

by pepperdigital

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 600px; margin: 0 auto"></div>

JavaScript

/**
 * A small Highcharts snippet/plugin for adding images to axis labels
 */
(function (H) {
    var iconSize = 32;

    H.wrap(H.Tick.prototype, 'renderLabel', function addImages(proceed) {

        proceed.apply(this, [].slice.call(arguments, 1));

        var tick = this,
            axis = this.axis,
            image = axis.options.images && axis.options.images[this.pos],
            xy = this.label && this.label.xy;
            

        if (image && xy) {
        
            // xy is bottom center of the label. Put the image to the left.
            xy.x -= this.label.getBBox().width / 2 + iconSize + -37;
            xy.y -= (iconSize + this.label.getBBox().height) / -5;

            
            if (!tick.image) {
                tick.image = axis.chart.renderer.image(image, xy.x, xy.y, iconSize, iconSize)
                    .add();
            } else { // Update existing
                tick.image.animate({
                    x: xy.x,
                    y: xy.y
                });
            }
        }
    });
}(Highcharts));
Highcharts.chart('container', {
    chart: {
        type: 'column',
        marginBottom: 100
    },
        credits: {
        enabled: false
    },
     exporting: {
        enabled: false
    },

    colors: ['#E3E48D', '#C4D600', '#86BC25', '#43B02A', '#009A44', '#046A38'],
    title: {
        text: ''
    },
    xAxis: {
 labels: {
          //  formatter: function() {
         //       return '<img src="http://s3-eu-west-1.amazonaws.com/deloitte.icons/icon-laptop.svg" //alt="" style="vertical-align: middle; width: 32px; height: 32px"/>'+ this.value;
   //         },
   //         useHTML: true
        },
        categories: [
'Laptop',
'Smartphone',
'Tablet'
        ],
        images: [
						'http://s3-eu-west-1.amazonaws.com/deloitte.icons/icon-laptop.svg',
            'http://s3-eu-west-1.amazonaws.com/deloitte.icons/icon-smartphone.svg',
           ...