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>
<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", "300");
    }
  })();
</script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var config = {
      type: 'line',
      data: {
        labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio'],
        datasets: [{
          label: 'Grupo 1',
          borderColor: 'rgba(255, 195, 49, 0.85)',
          backgroundColor: 'rgba(255, 195, 49, 0.85)',
          data: [
            10,
            20,
            30,
            50,
            12,
            14,
            12
          ],
        }, {
          label: 'Grupo 2',
          borderColor: 'rgba(255, 225, 159, 0.85)',
          backgroundColor: 'rgba(255, 225, 159, 0.85)',
          data: [
            15,
            20,
            30,
            55,
            12,
            14,
            12
          ],
        }, {
          label: 'Grupo 3',
          borderColor: 'rgba(253, 246, 178, 0.85)',
          backgroundColor: 'rgba(253, 246, 178, 0.85)',
          data: [
            10,
            20,
            0,
            50,
            12,
            14,
            12
          ],
        }, {
          label: 'Grupo 4',
          borderColor: 'rgba(122, 189, 148, 0.85)',
          backgroundColor: 'rgba(122, 189, 148, 0.85)',
          data: [
            0,
            20,
            30,
            50,
            12,
            14,
            12
          ],
       ...