JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<!-- https://jsfiddle.net/greenpeace/fvgz67un/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.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>
    Distribución de las inversiones requeridas para “Darle la vuelta al sistema” por ámbitos de actuación (2021-2024) 
  </p>
  <canvas id="grafica_inversiones" width="350" height="250"></canvas>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("grafica_inversiones");
    var grafica_inversiones = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ["Sistema energético", "Rehabilitación energética viviendas", "Movilildad sostenible", "I+D+i para la reconstrucción verde", "Entorno rural", "Transición justa", "Suelo y territorio", "Agenda Exterior"],
        datasets: [{
          label: '',
          data: [53559655667, 52591522772, 29187167229, 22766412572, 15584557601, 12905000000, 7405951834, 2713714286],
          backgroundColor: [
            'rgba(134, 139, 134, 0.85)',
            'rgba(91, 74, 89, 0.85)',
            'rgba(122, 189, 148, 0.85)',
            'rgba(195, 224, 166, 0.85)',
            'rgba(215, 213, 161, 0.85)',
            'rgba(255, 225, 159, 0.85)',
            'rgba(218,241,250, 0.85)',
            'rgba(253, 246, 178, 0.85)'

          ]
        }]
      },
      options: {
        title: {
          display: false,
          text: 'Distribución de las inversiones requeridas para “Darle la vuelta al sistema” por ámbitos de actuación.',
          fontSize: 16,
          fontFamily: '"Work Sans",sans-serif',
          fontColor: '#212529'
        },
        legend: {
       ...