JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2" defer></script>
<style>
  .fuente {
    font-family: "Work Sans", sans-serif;
    font-weight:400;
    font-size:14px;
    color:gray;
    text-align: left;
    margin: 0; 
  }
</style>
<div class="chart-container" style="position: relative; height:auto; width:100%">
    <canvas id="pie_chart_1" width="350" height="250"></canvas>
</div>
<div class="fuente">
    <p>
     Fuente: PGEs 2023 y elaboración propia.</p>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var ctx = document.getElementById("pie_chart_1").getContext("2d");
        var pie_chart_1 = new Chart(ctx, {
            type: 'pie',
            data: {
                datasets: [{
                    data: [
                       3514141750,
                       3481316590,
                       2444000000,
                       766437440,
                       652774860,
                       538759530,
                       146190800,
                       47931690,
                       14409040,
                       
                    ],
                    backgroundColor: [
                         
                          'rgba(255, 225, 159, 0.85)',
                          'rgba(122, 189, 148, 0.85)',
                          'rgba(255, 160, 0, 0.85)',
                          'rgba(195, 224, 166, 0.85)',
                          'rgba(255, 121, 84, 0.85)',
                          'rgba(255, 196, 167, 0.85)',
                          'rgba(134, 139, 134, 0.85)',
                          'rgba(91, 74, 89, 1)',
                          'rgba(72, 185, 229, 1)',
                    ],
                    label: 'Dataset 1'
                }],
                labels: [
                    'Costes del sistema eléctrico',
                    'Fondos Transición...