JSFiddle - React, Tailwind, and code Playground

by wenyi

HTML

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.4.0/Chart.js"></script>
<body>https://jsfiddle.net/user/login/
  <canvas id="myChart" width="800" height="400"></canvas>
  <div id="legend"></div>
</body>

JavaScript

var datos = [{
        label: 'Info',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
    }, {
        label: 'Low',
        data: [5, 19, 3, 5, 2, 3],
        backgroundColor: 'rgba(0, 255, 87, 0.2)',
        borderColor: 'rgba(0, 255, 87, 1)',
        borderWidth: 1
    }, {
        label: 'Medium',
        data: [4, 34, 5, 1, 6, 5],
        backgroundColor: 'rgba(255, 255, 0, 0.2)',
        borderColor: 'rgba(255, 255, 0, 1)',
        borderWidth: 1
    }, {
        label: 'High',
        data: [1, 34, 5, 1, 6, 5],
        backgroundColor: 'rgba(255, 128, 0, 0.2)',
        borderColor: 'rgba(255, 128, 0, 1)',
        borderWidth: 1
    }, {
        label: 'Critical',
        data: [5, 34, 5, 1, 6, 5],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
    }];

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["192.168.100.100", "192.168.100.100", "192.168.100.100", "192.168.100.100", "192.168.100.100", "192.168.100.100"],
            datasets: datos
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        stepSize: 2,
                        beginAtZero: true
                    }
                }]
            },
            legend: {
                display: true,
                position: 'right',
                padding: 50,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            },
            responsive: false,
            animation: {
                onComplete: function () {
                    if (myChart.data.datasets != undefined) {

                        myChart.data.datasets.forEach(function (dataset, i) {
                  ...