JSFiddle - React, Tailwind, and code Playground

by olgamarishem

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>
<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>
    Porcentaje de diversificación del aprovisionamiento de gas (2018 y 2019)
  </p>
 
  <canvas id="bar_chart_4" width="350" height="420"></canvas>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("bar_chart_4");
    var bar_chart_4 = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ["Argelia","Nigeria", "Qatar","Perú", "T&T", "Noruega", "Angola", "EEUU", "Bélgica", "Portugal", "Nacional", "Egipto", "Francia", "Países Bajos", "Rusia", "República Dominicana", "Camerún", "Guinea"],
          datasets: [{
            label: '2018',
            data: [51.20, 11.71, 9.60, 4.92, 6.18, 1.67, 0.26, 0.77,0.23, 0.03 ,0.27, 0, 10.25, 0, 2.49, 0.09, 0.22,0],
            backgroundColor: [
               'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
              'rgba(255, 225, 159, 0.85)',
         ...