JSFiddle - React, Tailwind, and code Playground

Content-related activities done by users on their smartphone

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: ['#0297A9', '#066B38', '#86BD40'],
    title: {
        text: ''
    },
         tooltip: {
        formatter: function () {
            return this.series.name +
                '<br><b>' + this.y + '%</b>';
        }
    },
    xAxis: {
        categories: [
'Transport and Storage',
'Accommodation and Food Services',
'Wholesale and Retail Trade, repair of motor vehicles and motor cycles',
'Manufacturing',
'Construction',
'Water Supply, Sewerage, Waste Management and Remediation activities',
'Financial and Insurance activities',
'Agriculture,Forestery and Fishing',
'Administrative and Support Service activities',
'Mining and Quarrying',
'Activities of Extraterritorial organisations and bodies',
'Electricity,Gas, Steam and Air Conditioning Supply',
'Public administration and defence, compulsory security services',
'Arts,Entertainment and Recreation',
'Professional, Scientific and Technical activities',
'Real Estate activities',
'Other Services',
'Activities of Household',
'Information and Communication',
'Human Health and Social Work Activities',
'Education'
        ]
    },
    yAxis: {
        min: 0,
        max: 100,
        labels: {
            format: '{value}%'
        },
        title: {
            text: ''
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
   series: [
{
        name: 'High opportunity',
        data: [
63,
59,
59,
45,
42,
41,
39,
38,
36,
30,
30,
30,
28,
27,
27,
27,
22,
22,
15,
15,
14
]},
 
    {
        name: 'Medium opportunity',
        data: [17,
18,
15,
16,
15,
29,
17,
48,
34,
18,
8,
18,
14,
23,
14,
23,
13,
58,
7,
35,
23]}, 
  {
        name: 'Low opportunity',
        data:...