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/[email protected]" defer></script>
<div class="chart-container" style="position: relative; height:auto; width:100%">
  <canvas id="bar_chart_5" width="350" height="250"></canvas>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("bar_chart_5");
    var bar_chart_5 = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"],
        datasets: [{
            label: 'Ingresos por Punto Verde',
            data: [365.60, 327.47, 447.04, 432.36, 415.11, 405.51, 411.24, 424.75, 434.80,447.19, 453.17],
            backgroundColor: 'rgba(195, 224, 166, 0.85)'        
          },
          {
            label: 'Otros ingresos',
            data: [24.91,	77.84, 39.17,	70.93, 8.55, 35.87, 43.18, 47.64, 59.31, 82.09, 125.65],
            backgroundColor: 'rgba(255, 195, 49, 0.85)'
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'Evolución de los ingresos de Ecoembes (2008-2018)',
          fontSize: 16,
          fontFamily: '"Work Sans",sans-serif',
          fontColor: '#212529'
        },
        legend: {
          display: true,
          labels: {
            fontName: '"Work Sans",sans-serif',
            fontColor: '#212529',
            fontSize: 13
          }
        },
        layout: {
          padding: {
            bottom: 20
          }
        },
        scales: {
          yAxes: [{
            stacked: true,
            ticks: {
              fontFamily: '"Work Sans",sans-serif',
              fontColor: '#212529'
            },
            scaleLabel: {
              display: true,
              labelString: 'Millones de euros',
              fontFamily: '"Work...