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" defer></script>
<div id="stackedCanvasContainer" style="position: relative; height:auto; width:100%">
  <canvas id="stackedCanvas" width="350" height="180"></canvas>
</div>
<script>
  (function() {
    var containerEl = document.getElementById("stackedCanvasContainer");
    var elwidth = containerEl.offsetWidth;
    if (elwidth < 450) {
      document.getElementById("stackedCanvas").setAttribute("height", "380");
    }
  })();

</script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var config = {
      type: 'line',
      data: {
        labels: ['1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],
        datasets: [{
          label: 'garantía de potencia',
          borderColor: 'rgba(255, 195, 49, 0.85)',
          backgroundColor: 'rgba(255, 195, 49, 0.75)',
          data: [
            1198.82,
            1245.09,
            980.09,
            836.93,
            852.92,
            919.17,
            947.80,
            1033.60,
            1187.50,
            698.80, , , , , , , , , ,

          ],
        }, {
          label: ' inversión medioambiental',
          borderColor: 'rgba(122, 189, 148, 0.85)',
          backgroundColor: 'rgba(122, 189, 148, 0.85)',
          data: [, , , , , , , , ,
            5.12,
            25.83,
            39.29,
            50.09,
            52.51,
            49.84,
            55.49,
            55.51,
            55.38,
            52.42,
            49.52,
          ],
        }, {
          label: 'por nuevas instalaciones',
          borderColor: 'rgba(255, 225, 159, 1',
          backgroundColor: 'rgba(255, 225, 159, 0.85)',
          data: [, , , , , , , , ,
            90.25,
            385.57,
            432.06,
            437.18,
            493.50,
            562.26,
...