JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2" defer></script>
<style>
    .chart-container p {
        font-family: "Work Sans", sans-serif;
        font-weight: 700;
        text-align: center;
        margin: 0;
        padding-bottom: 1%;
    }

    .footer p {
        font-family: "Work Sans", sans-serif;
        font-weight: 400;
        font-size: 13px;
        text-align: left;

    }
</style>
<div class="chart-container" style="position: relative; height:auto; width:100%">
    <p>
        <small>Plan España Puede (2021-2023)</small>
    </p>

    <canvas id="bar_chart_5" width="350" height="250"></canvas>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        var ctx = document.getElementById("bar_chart_5");
        var bar_chart_5 = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Energía", "Movilidad", "Ciudades y consumo", "Rural"],
                datasets: [{
                        label: 'Impide la transición',
                        data: [92660, 41269742.88, 0, 0],
                        backgroundColor: '#f23a02'
                    },
                    {
                        label: 'Apoyo insuficiente',
                        data: [0, 330290482, 0, 115702.48],
                        backgroundColor: '#FFC331'
                    },
                    {
                        label: 'Favorece la transición',
                        data: [1468715713, 4386090961, 1271684079, 504111579],
                        backgroundColor: '#7ABD94'
                    }
                ]
            },
            options: {
                title: {
                    display: false,
                    text: 'Valoración de las inversiones previstas para la transición ecológica del Plan España Puede (2021-2023)',
                   ...