JSFiddle - React, Tailwind, and code Playground

Waking - The interval between checking phones for the first time after waking and for the last time before going to sleep

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: {
    	backgroundColor: '#000000',
      borderColor: '#000000',
        type: 'column'
    },
        credits: {
        enabled: false
    },
     exporting: {
        enabled: false
    },

    colors: ['#0776A8', '#C2D217', 
   '#48AC33', '#98999B', '#012169'],
    title: {
        text: ''
    },
      subtitle: {
        text: 'Source: O*NET, ONS, Deloitte analysis 2017',
        floating: true,
        align: 'left',
        verticalAlign: 'bottom',
        y: 12
    },
    xAxis: {
        labels: {
           style: {
                color: '#FFFFFF'
            },
        },
 lineColor: '#FFFFFF',
        categories: [
'Eastern',
'East Midlands',
'London',
'Merseyside',
'North East',
'Nothern Ireland',
'North West',
'Scotland',
'South East',
'South West',
'Wales',
'West Midlands',
'Yorkshire and the Humber'
        ]
    },

    yAxis: {     
    gridLineColor: '#666666',
  
    min: 0,
    max: 50,
    labels: {
           format: '{value}%',
           style: {
                color: '#FFFFFF'
            },
        },
      
        title: {
            text: ''
        },
        title: {
            enabled: false
        }
    },
    
    legend: {
    itemStyle: {
            color: '#FFFFFF',
        },
itemHoverStyle: {
            color: '#98999B'
        }
    },
    plotOptions: {
        series: {
        borderColor: '#000000',
        }
    },
		tooltip: {
            valueSuffix: '%'
        },   
    series: [
    {
        name: 'Communication',
        data: [
45.23,
44.43,
46.48,
45.26,
44.78,
44.33,
45.05,
45.19,
45.94,
45.27,
44.72,
44.62,
44.66
        ]
    },
    {
        name: 'Strategic',
        data: [
40.83,
40.10,
42.01,
40.86,
40.28,
40.00,
40.60,
40.72,
41.51,
40.94,
40.42,
40.13,
40.28
        ]
    },
        {
        name: 'Analytical',
        data: [
40.47,
39.63,
41.61,
39.91,
39.93,
39.39,
40.16,
40.22,
41.16,
40.37,
39.68,
39.85,
39.72
        ]
    },
        {
      ...