Highcharts Demo

author(s): Torstein Hønsi

by ninachroscicka

HTML

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

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

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400);

JavaScript

Highcharts.chart('container', {
    chart: {
     		renderTo: 'container',
        type: 'bar'
        
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['Facebook','Twitter','Instagram','Blogi','Info','Inne'],
        title: {text:null},
        lineWidth: 0,
        minorGridLineWidth: 0,
        lineColor: 'transparent',
        minorTickLength: 0,
        tickLength: 0,
        labels: {
//                    enabled: false,
                    color: '#fff',
                    x: 6,
                    useHTML: true,
                    formatter: function () {
                        console.log(this);
                        return {
                            'Facebook': '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/1000px-F_icon.svg.png" height="20" width="20" ><img>&nbsp&nbsp&nbsp&nbsp;',
                            'Twitter': '<img src="http://likefb.pl/wp-content/uploads/2018/01/twittericon.png" height="20" width="20" ><img>&nbsp&nbsp&nbsp&nbsp;',
                            'Instagram': '<img src="https://i0.wp.com/lilliputadventure.com/wp-content/uploads/2018/06/Instagram-Icon.png?fit=1455%2C1454" height="20" width="20" ><img>&nbsp&nbsp&nbsp&nbsp;',
                            'Blogi':'<img src="https://cdn2.iconfinder.com/data/icons/eshop-outline-pack/100/Noun_Project_20Icon_5px_grid-13-512.png" height="20" width="20" ><img>&nbsp&nbsp&nbsp&nbsp;',
                            'Info': '<img src="https://cdn2.iconfinder.com/data/icons/eshop-outline-pack/100/Noun_Project_20Icon_5px_grid-13-512.png" height="20" width="20" ><img>&nbsp&nbsp&nbsp&nbsp;',
                            'Inne':'Inne &nbsp&nbsp&nbsp&nbsp; '
                        }[this.value]; 
                    }
                    
                }
        
    },
    yAxis: {visible:false
    },
    plotOptions: {
        bar: {
            groupPadding:1,
            pointWidth:15,
            borderRadius: 5,
           ...