JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<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_5" width="350" height="250"></canvas>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var ctx = document.getElementById("bar_chart_5");
        var bar_chart_5 = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["enero", "febrero", "marzo", "abril", "mayo", "junio"],
                datasets: [{
                        label: 'oro',
                        data: [8000, 7000, 6000, 5000, 4000, 3000],
                        backgroundColor: 'rgba(255, 195, 49, 0.85)'
                    },
                    {
                        label: 'plata',
                        data: [8000, 10000, 12000, 14000, 16000, 18000],
                        backgroundColor: 'rgba(134, 139, 134, 0.85)'
                    },
                    {
                        label: 'platina',
                        data: [70000, 9000, 10000, 9000, 14000, 15000],
                        backgroundColor: 'rgba(195, 224, 166, 0.85)'
                    }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: 'Evolución de datos acumulados en el tiempo',
                    fontSize: 16,
                    fontFamily: '"Work Sans",sans-serif',
                    fontColor: '#212529'
                },
                legend: {
                    display: true,
                    labels: {
                        fontName: '"Work Sans",sans-serif',
                        fontColor: '#212529',
                        fontSize: 13
                    }
                },
                layout: {
                   ...