JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.1" defer></script>
<style>
    .chart-container p {
        font-family: "Work Sans", sans-serif;
        font-weight: 700;
        text-align: center;
        margin: 0;
    }
</style>
<div class="chart-container" style="position: relative; height:auto; width:100%">
    <p>
        Valoración Información sobre Agua

    </p>
    <canvas id="media_3" width="350" height="360"></canvas>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var ctx = document.getElementById("media_3");
        var media_3 = new Chart(ctx, {
            type: 'horizontalBar',
            data: {
                labels: [
                    "CEPSA",
                    "EL CORTE INGLÉS",
                    "NATURGY",
                    "IBERDROLA",
                    "REPSOL",
                    "ACS",
                    "ENDESA",
                    "EROSKI",
                    "MERCADONA",
                    "INDITEX",
                    "FCC",
                    "CAIXABANK",
                    "BBVA",
                    "SANTANDER",
                    "MANGO",
                    "G. FUERTES/ EL POZO",
                    "IBERIA",
                    "FERROVIAL",
                    "MAPFRE",
                    "TENDAM/ CORTEFIEL",
                    "AIR EUROPA",
                    "CAMPOFRÍO",
                    "CASA TARRADELLAS"
                ],
                datasets: [{
                    label: '',
                    data: [
                        90.6,
                        83.3,
                        70.8,
                        60.4,
                        60.4,
                        56.3,
                        54.2,
                        51.2,
                        50.0,
                        48.8,
                       ...