Highcharts Demo

author(s): Torstein Hønsi

by pepperdigital

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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"></div>

CSS

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
            credits: {
        enabled: false
    },
     exporting: {
        enabled: true
    },
    colors: ['#00A3E0', '#0076A8', '#012169', '#2C5234', '#C4D600'],
    title: {
        text: ''
    },
     tooltip: {
        formatter: function () {
            return this.series.name +
                '<br><b>' + this.y + '%</b>';
        }
    },
    xAxis: {
        categories: [
'None of these',
'To present to clients/colleagues',
'To access the company file network/storage',
'To submit expenses',
'To edit documents/spreadsheets',
'To record my working hours',
'To manage my time/workload',
'To make voice calls using the Internet (VoIP)',
'Other business related tasks',
'To access the company intranet',
'To communicate with colleagues or clients via instant messages',
'To use the maps app',
'Calendar management',
'To make standard calls',
'Email'
]
    },
    yAxis: {
        min: 0,
        max: 60,
        labels: {
            format: '{value}%'
        },
        title: {
            text: ''
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [
    {
        
        data: [
34,
4,
5,
5,
7,
7,
8,
8,
8,
9,
20,
24,
26,
42,
{y: 45, color: '#012169'}
        ]
    }]



});