JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2" defer></script>
<div class="chart-container" style="position: relative; height:auto; width:100%">
  <canvas id="bar_chart_3" width="350" height="250"></canvas>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("bar_chart_3");
    var bar_chart_3 = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["enero", "febrero", "marzo", "abril", "mayo", "junio"],
        datasets: [{
            label: 'Altas',
            data: [8000, 9000, 10000, 9000, 12000, 13000],
            backgroundColor: [
              'rgba(195, 224, 166, 0.85)',
              'rgba(195, 224, 166, 0.85)',
              'rgba(195, 224, 166, 0.85)',
              'rgba(195, 224, 166, 0.85)',
              'rgba(195, 224, 166, 0.85)',
              'rgba(195, 224, 166, 0.85)'
            ]
          },
          {
            label: 'Bajas',
            data: [-6000, -19000, -11000, -8000, -14000, -11000],
            backgroundColor: [
              'rgba(255, 195, 49, 0.85)',
              'rgba(255, 195, 49, 0.85)',
              'rgba(255, 195, 49, 0.85)',
              'rgba(255, 195, 49, 0.85)',
              'rgba(255, 195, 49, 0.85)',
              'rgba(255, 195, 49, 0.85)'
            ]
          }

        ]
      },
      options: {
        title: {
          display: true,
          text: 'Positivos y negativos',
          fontSize: 16,
          fontFamily: '"Work Sans",sans-serif',
          fontColor: '#212529'
        },
        legend: {
          display: true,
          labels: {
            fontName: '"Work Sans",sans-serif',
            fontColor: '#212529',
            fontSize: 13
          }
        },
        layout:...