JSFiddle - React, Tailwind, and code Playground

by Reinventatuweb

HTML

<!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> -->

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!--  modified file is removed e.resetTransform() for chartjs version 4.4.1 -->
<!--  <script src="https://reinventatuweb.cl/otros/chart-4-4-1-m.min.js"></script> -->

<div id="wrapper">
  <canvas id="canvas">
    <!-- your chart will be generated here! -->
  </canvas>
</div>

JavaScript

// Configuración del gráfico y exportación a SVG
var ctx = document.getElementById('canvas');
ctx.width = 600;
ctx.height = 400;

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},   // 0: fill to 'origin'
            {fill: '-1'},       // 1: fill to dataset 0
            {fill: 1},          // 2: fill to dataset 1
            {fill: false},      // 3: no fill
            {fill: '-2'}        // 4: fill to dataset 2
        ]
    },
    options: {
        plugins: {
            filler: {
                propagate: true
            }
        }
    }
});