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: [
            10000,
            20000,
            30000,
            50000,
            12000,
            14000,
            12000
          ],
        }, {
          label: 'Grupo 2',
          borderColor: 'rgba(255, 225, 159, 0.85)',
          backgroundColor: 'rgba(255, 225, 159, 0.85)',
          data: [
            15000,
            20000,
            30000,
            55000,
            12000,
            14000,
            12000
          ],
        }, {
          label: 'Grupo 3',
          borderColor: 'rgba(253, 246, 178, 0.85)',
          backgroundColor: 'rgba(253, 246, 178, 0.85)',
          data: [
            10000,
            20000,
            0,
            50000,
            12000,
            14000,
            12000
          ],
        }, {
          label: 'Grupo 4',
          borderColor: 'rgba(122, 189, 148, 0.85)',
          backgroundColor: 'rgba(122, 189, 148, 0.85)',
          data: [
            0,
            20000,
            30000,
           ...