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>
<div class="chart-container" style="position: relative; height:auto; width:100%">
  <canvas id="bar_chart_1" width="350" height="250"></canvas>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("bar_chart_1");
    var bar_chart_1 = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021"],
        datasets: [{
          label: 'Hectáreas',
          data: [3355000, 3450000, 3475000, 3500000, 3480000, 3540000, 3570000, 3600000, 3680000, 3700000, 3730000, 3790000, 3810000, 3890000, 3885000, 3920000],
          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)'
          ]
        }]
      },
      options: {

        legend: {
          display: false
        },
        title: {
          display: true,
          text: 'Evolución la extensión del regadío en España',
          fontSize: 16,
          fontFamily: '"Work Sans",sans-serif',
          fontColor: '#212529'
        },
        layout: {
          padding: {
            bottom: 20
          }
        },
...