JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: ['mar 2019', 'feb 2020', '10 mar', '11 mar', '12 mar', '13 mar', '14 mar', '15 mar', '16 mar', '17 mar', '18 mar', '19 mar', '20 mar', '21 mar', '22 mar', '23 mar', '24 mar', '25 mar', '26 mar'],
      datasets: [

        {
          type: 'line',
          label: 'max',
          borderColor: 'rgba(255, 77, 22, 1)',
          borderWidth: 2,
          fill: false,
          data: [, ,
            87,
            81,
            72,
            56,
            35,
            27,
            24,
            28,
            42,
            35,
            26,
            17,
            15,
            28,
            22,
            22,
            36,

          ]
        }, {
          type: 'line',
          label: 'min',
          borderColor: 'rgba(255, 160, 0, 1)',
          borderWidth: 2,
          fill: false,
          data: [, ,
            25,
            26,
            22,
            15,
            8,
            6,
            8,
            4,
            14,
            11,
            7,
            4,
            4,
            5,
            2,
            6,
            9,
          ]
        }, {
          type: 'bar',
          label: 'media',
          backgroundColor: 'rgba(134, 139, 134, 1)',
          data: [
            36,
            45,
            66,
            65,
            54,
            40,
            21,
            15,
            16,
    ...