JSFiddle - React, Tailwind, and code Playground

Usage of smartphone for work related activities

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: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
        credits: {
        enabled: false
    },
     exporting: {
        enabled: false
    },

    colors: ['#007680'],
    title: {
        text: ''
    },
    xAxis: {
        categories: [
'Email',
'Making standard calls',
'Calendar management',
'Viewing documents',
'Managing my time/workload',
'Editing documents / spreadsheets',
'Tethering mobile phone to connect to a workstation',
'Accessing the company intranet',
'Making voice calls using the Internet (VoIP)',
'Logging your working hours',
'Accessing the company file network/storage',
'Submitting expenses',
'Other',
'None of these'
        ],
plotBands: [{ 
            from: -0.5,
            to: 2.5,
            color: '#DDEFE8',
            label: {
                text: 'Mostly mobile optimised',
                Align: 'left',
                verticalAlign: 'bottom',
                x: 300,
                y: -5,
									}
            }
            
]
    },
    yAxis: {
        min: 0,

        title: {
            text: ''
        }
    },
    yAxis: {
        min: 0,

        labels: {
            format: '{value}%'
        },
        title: {
            enabled: false
        }
    },
    
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
		tooltip: {
            valueSuffix: '%'
        },   
    series: [{
        name: 'Data',
              
        data: [
41,
34,
23,
17,
7,
6,
6,
6,
6,
5,
5,
4,
3,
44
        ]
    }]
});