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 Cambio Climático
    </p>
    <canvas id="media_1" width="350" height="360"></canvas>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var ctx = document.getElementById("media_1");
        var media_1 = new Chart(ctx, {
            type: 'horizontalBar',
            data: {
                labels: [
                    "NATURGY",
                    "IBERDROLA",
                    "EROSKI",
                    "CEPSA",
                    "ACS",
                    "ENDESA",
                    "FERROVIAL",
                    "MAPFRE",
                    "FCC",
                    "BBVA",
                    "INDITEX",
                    "AIR EUROPA",
                    "SANTANDER",
                    "EL CORTE INGLÉS",
                    "CAIXABANK",
                    "IBERIA",
                    "TENDAM/CORTEFIEL",
                    "REPSOL",
                    "MANGO",
                    "MERCADONA",
                    "CAMPOFRÍO",
                    "CASA TARRADELLAS",
                    "G. FUERTES"
                ],
                datasets: [{
                    label: '',
                    data: [
                        80.6,
                        75,
                        59.4,
                        57.4,
                        53.6,
                        53.4,
                        53.2,
                        48.2,
                        45.1,
                        44.6,
                       ...