JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-subtitle" defer></script>
<link href="https://fonts.googleapis.com/css?family=:400,700" rel="stylesheet">
<div class="chart-container" style="position: relative; height:400; width:100%">
  <canvas id="importaciones_carbon" width="360" height="350"></canvas>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("importaciones_carbon");
    Chart.defaults.global.defaultFontFamily = "'Work Sans',sans-serif";
    Chart.defaults.global.defaultFontSize = 14;
    var importaciones_carbon = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['2014', '2015', '2016', '2017', '2018'],
        datasets: [{
          label: 'Toneladas de carbón',
          yAxisID: 'toneladas_carbon',
          data: [17044084.55, 19307154.72, 13577617.70, 19883878.35, 16435474.33],
          backgroundColor: 'rgba(0, 0, 0, 0.0)',
          borderColor: 'rgba(0, 0, 0, 1)',
          borderWidth: 3
        }, {
          label: 'Millones de euros',
          yAxisID: 'millones_euros',
          data: [1155, 1270.98, 864.83, 1838.28, 1532.10],
          backgroundColor: 'rgba(0, 0, 0, 0.0)',
          borderColor: 'rgba(204, 0, 0, 1)',
          borderWidth: 3
        }]
      },
      options: {
        elements: {
          line: {
            tension: 0, // disables bezier curves
          }
        },
        scales: {
          yAxes: [{
            id: 'toneladas_carbon',
            type: 'linear',
            position: 'left',
            ticks: {
              beginAtZero: true,
              max: 20000000,
              min: 0,
              callback: function(value, index,...