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"></script>
<p style="font-size: 16px; text-align: center; color: #686868;"><strong>Exportaciones realizadas por armas de cañón, municiones, bombas, torpedos, cochetes, misiles, otros dispositivos y cargas explosivas entre 2015 y 2018</strong></p>
<div class="chart-container" style="position: relative; height:auto; width:100%">
  <canvas id="line_chart_2"></canvas>
</div>

<script>
  var ctx = document.getElementById("line_chart_2");
  var line_chart_2 = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [ "2015", "2016","2017","2018"],
      datasets: [{
        label: 'Arabia Saudí',
        lineTension: 0.1,
        borderWidth: 2,
        borderColor: 'rgb(0, 108, 53)',
        fill: false,
        pointRadius: 2,
        backgroundColor: 'rgb(0, 108, 53)',
        data: [42065313,75980546, 90117910,90536709]
      },{
        label: 'Emiratos Árabes Unidos',
        lineTension: 0.1,
        borderWidth: 2,
        fill: false,
        pointRadius: 2,
        borderColor: 'rgb(255, 217, 69)',
        backgroundColor: 'rgb(255, 217, 69)',
        data: [0,5572266,42632451,2470680]
      }]
    },
    options: {
      title: {
        display: false,
        text: 'Exportaciones realizadas por armas de cañón, municiones, bombas, torpedos, cochetes, misiles, otros dispositivos y cargas explosivas entre 2015 y 2018',
        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, ".") + ' €';
 ...