JSFiddle - React, Tailwind, and code Playground

by upcheezy

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="bubble-chart"></div>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: white;
}

body * {
    box-sizing: border-box;
}

/* #bubble-chart{
    width: 100%;
    height: 100%;
    position: absolute;
} */

JavaScript

const data = [
    {
        "name": "Design",
        "data": [
            {
                "name": "Add Service Area",
                "value": 1
            },
            {
                "name": "Cancel",
                "value": 4
            },
            {
                "name": "Multiple",
                "value": 7
            },
            {
                "name": "New",
                "value": 1607
            },
            {
                "name": "Resend",
                "value": 1
            },
            {
                "name": "Update",
                "value": 9
            }
        ]
    },
    {
        "name": "Emergency",
        "data": [
            {
                "name": "Additional Info",
                "value": 7
            },
            {
                "name": "Add Service Area",
                "value": 6
            },
            {
                "name": "Cancel",
                "value": 614
            },
            {
                "name": "Multiple",
                "value": 27
            },
            {
                "name": "New",
                "value": 38093
            },
            {
                "name": "Remark",
                "value": 64
            },
            {
                "name": "Resend",
                "value": 1007
            }
        ]
    },
    {
        "name": "Normal",
        "data": [
            {
                "name": "Additional Info",
                "value": 286
            },
            {
                "name": "Add Service Area",
                "value": 117
            },
            {
                "name": "Cancel",
                "value": 13168
            },
            {
                "name": "Multiple",
                "value": 600
            },
            {
                "name": "New",
                "value": 721391
            },
            {
                "name": "No Show",
                "value": 32872
            },
        ...