JSFiddle - React, Tailwind, and code Playground

Activities done when people check their phone in the middle of the night (all age groups vs 16-24 year olds)

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

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

    colors: ['#00A3E0', '#005587'],
    title: {
        text: ''
    },
    xAxis: {

        categories: [
'I do not check my phone during the night',
'Check the time',
'Check instant messages/SMS',
'Check social media notifications',
'Read personal emails',
'Read news',
'Respond to instant messages/SMS',
'Read work emails',
'Play games',
'Do not know',
'Check other apps',
'Respond to personal emails',
'Read a book',
'Check games notifications',
'Respond to work emails'
        ]
    },

    yAxis: {
        min: 0,
    max: 70,
        labels: {
            format: '{value}%'
        },
        title: {
            text: ' '
        },
        title: {
            enabled: false
        }
    },
    
    legend: {
        enabled: true
    },

		tooltip: {
            valueSuffix: '%'
        },   
    series: [{
        name: 'All age groups',
        data: [
63,
23,
10,
10,
7,
7,
7,
5,
5,
3,
3,
3,
3,
2,
2
        ]
    },
    {
        name: '16-24 year olds',
        data: [
45,
34,
21,
22,
12,
8,
17,
5,
8,
3,
7,
5,
4,
4,
5
        ]
    }]
});