JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.2/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.1" defer></script>
<div class="chart-container" style="position: relative; height:auto; width:100%">
  <canvas id="line_chart_4" width="350" height="250"></canvas>
</div>
<style>
  .fuente {
    font-family: "Work Sans", sans-serif;
    font-weight:400;
    font-size:14px;
    color:gray;
    text-align: left;
    margin: 0; 
  }
</style>
<div class="fuente">
    <p>
     Fuente: PGE y Centre Delàs. </p>
</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, 2022, 2023],
      datasets: [{
        label: 'Gasto Militar',
        data: [19026240000, 18560980000, 17587050000, 16371030000, 15581780000, 15282620000, 15505440000, 15448820000, 17230340000, 18836430000, 20475730000, 24817610000, 27617430000],
        borderColor: 'rgba(255, 77, 22, 1)',
        backgroundColor: 'rgba(0,0,0,0)',
        borderDash: [5, 5]
      }, {
        label: 'Ministerio de Defensa',
        data: [8255772260, 7694862260, 7156379770, 6316440520, 5937000040, 5745769970, 5767782710, 5787890450, 7638547940, 8455963720, 9411931940, 10155269160, 12827177550],
        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 y Gasto Militar',
        fontSize: 16,
        fontFamily: '"Work Sans",sans-serif'
      },
      legend: {
        display: true,
        labels: {
          fontName: '"Work Sans",sans-serif',
          fontSize: 13
        }
      },
      layout: {
        padding: {
          bottom: 20
        }
      },
     ...