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_4" width="350" height="250"></canvas>
</div>

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  var ctx = document.getElementById("line_chart_4");
  var line_chart_4 = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [ 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2021],
      datasets: [{
        label: 'Iniciales Defensa',
        data: [8255772260, 7694862260, 7156379770, 6316440520, 5937000040, 5745769970, 5767782710, 5787890450, 7638547940, 8455963720, 9411931940],
        borderColor: 'rgba(255, 77, 22, 1)',
        backgroundColor: 'rgba(0,0,0,0)',
        borderDash: [5, 5]
      }, {
        label: 'Ejecutados Defensa',
        data: [9741368540, 9154423600, 8560089000, 7411744460, 6913657660, 6776749400, 6853909250, 6899223800],
        borderColor: 'rgba(255, 77, 22, 1)',
        backgroundColor: 'rgba(0,0,0,0)'
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Evolución del presupuesto del Ministerio de Defensa',
        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: {
   ...