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>
<p style="text-align: center; font-weight: 700">Distribución de las inversiones requeridas para “Darle la vuelta al sistema” según naturaleza jurídica del inversor. (2021-2024)</p>
<div class="chart-container" style="position: relative; height:auto; width:100%">
  <canvas id="grafica_publico_privado_2" width="350" height="250"></canvas>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("grafica_publico_privado_2");
    var grafica_publico_privado_2 = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["Ámbito público (53,7%)", "Ämbito privado (46,3%)", ],
        datasets: [{
            label: 'Sistema energético ',
            data: [11573760000, 41985895667],
            backgroundColor: 'rgba(134, 139, 134, 0.85)'
          },
          {
            label: 'Rehabilitación energética viviendas ',
            data: [24969061524, 27622461248],
            backgroundColor: 'rgba(91, 74, 89, 0.85)'
          },
          {
            label: 'Movilildad sostenible',
            data: [25672167229, 3515000000],
            backgroundColor: 'rgba(122, 189, 148, 0.85)'
          },
          {
            label: 'I+D+i para la reconstrucción verde',
            data: [9868000000, 12898000000],
            backgroundColor: 'rgba(195, 224, 166, 0.85)'
          },
          {
            label: 'Entorno rural',
            data: [11250556927, 4334000674],
            backgroundColor: 'rgba(215, 213, 161, 0.85)'
          },
          {
            label: 'Transición Justa',
            data: [12905000000, 0],
            backgroundColor: 'rgba(255, 225, 159, 0.85)'
          },
          {
            label: ' Suelo y territorio',
            data: [6740764196, 665187638],
           ...