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 class="chart-container" style="position: relative; height:auto; width:100%">
  <canvas id="line_chart_1x" width="350" height="250"></canvas>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
  var ctx = document.getElementById("line_chart_1x");
  var line_chart_1 = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["2007", "2008", "2009", "2010", "2011" , "2012", "2013", "2014", "2015", "2016", "2017"],
      datasets: [{
          label: 'UE',
          data: [0.137, 0.162, 0.164, 0.170, 0.183, 0.193, 0.201, 0.206, 0.210, 0.205, 0.204],
          borderColor: 'rgba(142, 229, 187, 1)',
          backgroundColor: 'rgba(0,0,0,0)'
        },
        {
          label: 'España',
          data: [0.124, 0.146, 0.163, 0.179, 0.203, 0.223, 0.225, 0.227, 0.234, 0.223, 0.224],
          borderColor: 'rgba(255, 160, 0, 1)',
          backgroundColor: 'rgba(0,0,0,0)'
        },
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Evolución del precio de la electricidad (2007-2017)',
        fontSize: 16,
        fontFamily: '"Work Sans",sans-serif',
        fontColor: '#212529'
      },
      legend: {
        display: true,
        labels: {
          fontName: '"Work Sans",sans-serif',
          fontColor: '#212529',
          fontSize: 13
        }
      },
      layout: {
        padding: {
          bottom: 20
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            max: 0.25,
            fontFamily: '"Work Sans",sans-serif',
            fontColor: '#212529'
          },
          scaleLabel: {
            display: true,
            labelString: 'Euros por Kilowatio/hora',
            fontFamily: '"Work Sans",sans-serif',
            fontColor: '#212529'
          }
        }],
        xAxes: [{
          ticks: {
           ...