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;
  }
  .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%">
  <p>
    Ranking de emisiones de gases de efecto invernadero por la ganadería 
  
    <small>2019</small>
  </p>
  <canvas id="bar_2_chart_4" width="350" height="250"></canvas>
</div>
<div class="fuente">
    <p>
     Fuente: Elaboración propia.</p>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("bar_2_chart_4");
    var bar_2_chart_4 = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ["Catalunya","Galicia","Castilla y León","Aragón","Andalucía","Castilla-La Mancha", "Comunitat Valenciana","Murcia","Extremadura","Madrid","Asturias","Navarra","Cantabria","Euskadi","Canarias","Illes Balears","La Rioja"],
        datasets: [{
          label: '',
          data: [20.5,8.4,7.3,7.1,6.2,5.2,3.9,3.5,1.5,1.3,1.2,1.1,0.9,0.6,0.3,0.2,0.2],
          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(218,241,250, 0.85)',
            'rgba(255, 225, 159, 0.85)',
            'rgba(253, 246, 178, 0.85)',
            'rgba(255, 160, 0, 0.85)',
            'rgba(255, 196, 167, 0.85)',
            'rgba(255, 121, 84, 1)',
            'rgba(72, 185, 229, 0.65)',
            'rgba(255, 195, 49, 0.65)',
            'rgba(142, 229,...