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: PGE. 2023. Programas 456A, 456B, 456C, 456D, 456M, 452A, 452M, 45DA C04.I01, 45DB C04.I02, 45DC C04.I03, 45DD C04.I04, 45EA C05.I01, 45EB C05.I02, 45EC C05.I03, 45ED C05.I04, 45LC C12.I03.</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: [
                       1961343000,
                       1932472100,
                       294753020,
                       96905450,
                       27772150,
                       21474880,
                       
                    ],
                    backgroundColor: [
                         'rgba(122, 189, 148, 0.85)',
           
            'rgba(255, 225, 159, 0.85)',
             'rgba(195, 224, 166, 0.85)',
            'rgba(255, 160, 0, 0.85)',
            'rgba(255, 121, 84, 1)',
            'rgba(255, 196, 167, 0.85)',
                        
                    ],
                    label: 'Dataset 1'
                }],
                labels: [
                    'Fondos medioambiente',
                    'Agua',
                    'Protección del medio natural',
                    'Costas',
                    'Contaminación y cambio climático',
                    'Protección y...