JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@0.5.7/chartjs-plugin-annotation.min.js" defer></script>
<div class="chart-container" lang="es-ES" style="position: relative; height:auto; width:100%">
  <canvas id="covid_chart_1" width="350" height="250"></canvas>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {

    var chartData = {
      labels: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
      datasets: [

        {
          type: 'line',
          label: 'Generación renovables (GWh)',
          borderColor: 'rgba(255, 77, 22, 1)',
          borderWidth: 2,
          fill: false,
          data: [
            60469,
            73951,
            95761,
            86667,
            85338,
            109757,
            107876,
            94088,
            101089,
            84610,
            100344,
            97913,
            110605,
            121459,
            116683,
           

          ]
       
        }, {
          type: 'bar',
          label: 'Emisiones totales (miles tCO2eq)',
          backgroundColor: 'rgba(134, 139, 134, 1)',
          data: [
            97862,
            82086,
            67168,
            80094,
            86416,
            66622,
            66475,
            77561,
            63486,
            74860,
            64940,
            50000,
            36130,
            35908,
            44446,
          

          ]
        }

      ]

    };

    var ctx = document.getElementById('covid_chart_1').getContext('2d');
    var myMixedChart = new Chart(ctx, {
      type: 'bar',
      data: chartData,
      options: {
        responsive: true,
        title: {
          display: true,
        ...