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_2" width="350" height="250"></canvas>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var bubble_chart_2 = new Chart(document.getElementById("bubble_chart_2"), {
            type: 'scatter',
            data: {
                datasets: [{
                        label: 'Pescador',
                        borderColor: 'rgba(122, 189, 148, 1)',
                        backgroundColor: 'rgba(122, 189, 148, 0.85)',
                        borderWidth: 1,
                        data: [{
                            x: -9,
                            y: 5
                        }, {
                            x: -10,
                            y: 5
                        }, {
                            x: -6,
                            y: 4
                        }, {
                            x: -11,
                            y: 6
                        }, {
                            x: -8,
                            y: 10
                        }]
                    },
                    {
                        label: 'Agricultor',
                        borderColor: 'rgba(255, 77, 22, 1)',
                        backgroundColor: 'rgba(255, 77, 22, 0.85)',
                        borderWidth: 1,
                        data: [{
                            x: 10,
                            y: -5
                        }, {
                            x: 11,
                            y: -6
                        }, {
                            x: 10,
                            y: -4
                       ...