JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-funnel@1.0.5" defer></script>

<div id="canvas-holder" style="width:100%; height: auto; margin-bottom: 2em;">
    <canvas id="chart-area" width="350" height="200"></canvas>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var config = {
            type: 'funnel',
            data: {
                datasets: [{
                    data: [10, 30, 90, 270],
                    backgroundColor: [
                        "rgba(122, 189, 148, 1)",
                        "rgba(253, 246, 178, 1)",
                        "rgba(255, 195, 49, 1)",
                        "rgba(255, 196, 167, 1)"
                    ]
                }],
                labels: [
                    "Socios",
                    "Llamadas",
                    "Firmas",
                    "Visitas"

                ]
            },
            options: {
                responsive: true,
                sort: 'desc',
                legend: {
                    position: 'top',
                    labels: {
                        fontSize: 13,
                        fontFamily: '"Work Sans",sans-serif',
                        fontColor: '#212529'
                    }
                },
                title: {
                    display: true,
                    text: 'Funel',
                    fontSize: 16,
                    fontFamily: '"Work Sans",sans-serif',
                    fontColor: '#212529'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById("chart-area").getContext("2d");
           ...