JSFiddle - React, Tailwind, and code Playground

Activities that people use their phone to do and the frequency

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: 290px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; max-width: 800px; height: 370px; margin: 0 auto"></div>
<div id="container3" style="min-width: 310px; max-width: 800px; height: 290px; margin: 0 auto"></div>
<div id="container4" style="min-width: 310px; max-width: 800px; height: 160px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
 
        credits: {
        enabled: false
    },
     exporting: {
        enabled: false
    },
    colors: ['#86BC25', '#43B02A', '#046A38', '#0097A9', '#62B5E5', 
   '#00A3E0', '#0076A8', '#012169', '#2C5234', '#C4D600'],
    title: {
        text: 'Finance'
    },
    xAxis: {
        categories: [
'Transfer money to someone in different country',
'Transfer money to someone in your country',
'Other online banking transactions',
'Check bank balances'
        ]
    },
    yAxis: {
        min: 0,
            max: 100,
        title: {
            text: ''
        },
        labels: {
            format: '{value}%'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'At least once a week',
        data: [
4,
9,
21,
36
        ]
    }, {
        name: 'At least once a month',
        data: [
4,
14,
15,
9
        ]
    }, {
        name: 'Less often',
        data: [
7,
13,
10,
7        
        ]
    }, {
        name: 'Never',
        data: [
84,
62,
53,
46
        ]
    }, {
        name: 'Do not know',
        data: [
2,
2,
1,
1
        ]
    }]
});
Highcharts.chart('container2', {
    chart: {
        type: 'bar'
    },
 
        credits: {
        enabled: false
    },
     exporting: {
        enabled: false
    },
    colors: ['#86BC25', '#43B02A', '#046A38', '#0097A9', '#62B5E5', 
   '#00A3E0', '#0076A8', '#012169', '#2C5234', '#C4D600'],
    title: {
        text: 'Shopping'
    },
    xAxis: {
        categories: [
'Interact with businesses via messenger apps',
'Make an online purchase of a service',
'Make reservations/bookings',
'Make an online purchase of a product',
'Read reviews about a product/service',
'Research a product/service',
'Browse shopping websites/apps'
        ]
    },
    yAxis: {
        min: 0,
            max: 100,
            labels: {
  ...