JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>
<div class="chart-container" style="position: relative; height:auto; width:100%">
    <canvas id="bubble_chart_1" width="350" height="250"></canvas>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var bubble_chart_1 = new Chart(document.getElementById("bubble_chart_1"), {
            type: 'bubble',
            data: {
                datasets: [{
                    label: ["China"],
                    backgroundColor: "rgba(255, 121, 84, 0.4)",
                    borderColor: "rgba(255, 121, 84, 1)",
                    borderWidth: 1,
                    hoverRadius: 1,
                    data: [{
                        x: 300,
                        y: 5.245,
                        r: window.innerWidth / 40
                    }]
                }, {
                    label: ["Dinamarca"],
                    backgroundColor: "rgba(142, 229, 187, 0.4)",
                    borderColor: "rgba(142, 229, 187, 1)",
                    borderWidth: 1,
                    hoverRadius: 1,
                    data: [{
                        x: 200,
                        y: 7.526,
                        r: window.innerWidth / 140
                    }]
                }, {
                    label: ["Alemania"],
                    backgroundColor: "rgba(134, 139, 134, 0.4)",
                    borderColor: "rgba(134, 139, 134, 1)",
                    borderWidth: 1,
                    hoverRadius: 1,
                    data: [{
                        x: 100,
                        y: 6.994,
                        r: window.innerWidth / 80
                    }]
                }, {
                    label: ["Japón"],
    ...