JSFiddle - React, Tailwind, and code Playground

Weekly video consumption, by format, by age group

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
            credits: {
        enabled: false
    },
     exporting: {
        enabled: false
    },
    colors: ['#86BC25', '#43B02A', '#046A38', '#0097A9', '#62B5E5', 
   '#00A3E0', '#0076A8', '#012169', '#2C5234', '#C4D600'],
    title: {
        text: ''
    },
     tooltip: {
        formatter: function () {
            return this.series.name +
                '<br><b>' + this.y + '%</b>';
        }
    },
    xAxis: {
        categories: [
'Watch short videos',
'Watch videos shared on IM networks',
'Stream films and/or TV series',
'Watch video news stories on news apps',
'Watch TV programmes via catch-up services',
'Watch live TV'
]
    },
    yAxis: {
        min: 0,
        max: 90,
        labels: {
            format: '{value}%'
        },
        title: {
            text: ''
        }
    },
    legend: {
        enabled: true
    },

 
    series: [
    {
        name: '16-17',
        data: [
77,
69,
47,
42,
36,
31
        ]
    },
    {
        name: '18-24',
        data: [
66,
58,
28,
45,
27,
26
        ]
    },
    {
        name: '25-34',
        data: [
55,
50,
20,
36,
22,
20
        ]
    },
 
    {
        name: '35-44',
        data: [
43,
39,
17,
37,
18,
21
        ]
    },
    {
        name: '45-54',
        data: [
31,
27,
8,
30,
12,
13
        ]
    },
 
    {
        name: '55-64',
        data: [
18,
17,
3,
19,
6,
6
        ]
    },
    {
        name: '65-75',
        data: [
13,
13,
2,
15,
4,
3
        ]
    }
    ]
});