JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/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="line_chart_2" width="350" height="250"></canvas>
</div>

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  var ctx = document.getElementById("line_chart_2");
  var line_chart_2 = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2021"],
      datasets: [{
        label: 'Presupuesto',
        data: [300000, 300000, 400000, 315900, 264690, 264690, 264690, 872630, 872630, 872630, 700000],
        borderColor: 'rgba(142, 229, 187, 1)',
        backgroundColor: 'rgba(0,0,0,0)'
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Evolución del Presupuesto para Agricultura Ecológica',
        fontSize: 16,
        fontFamily: '"Work Sans",sans-serif'
      },
      legend: {
        display: true,
        labels: {
          fontName: '"Work Sans",sans-serif',
          fontSize: 13
        }
      },
      layout: {
        padding: {
          bottom: 20
        }
      },

      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var value = tooltipItem.yLabel;
            if (parseInt(value) >= 1000) {
              return " " + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + ' €';
            } else {
              return '€' + value;
            }
          }
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            // max: 25,
            fontFamily: '"Work Sans",sans-serif',
            callback: function(label, index, labels) {
              return label / 1000;
            }
          },
          scaleLabel: {
           ...