JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js" defer></script>
<div id="error_1" style="width: 100%; height: 400px; margin-bottom: 1em;"></div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var data = [{
            x: ['∙ 2001', '∙ 2002', '∙ 2003', '∙ 2004'],
            y: [2, 1, 3, 4],
            line: {
                color: 'rgba(215, 213, 161, 1)',
                width: 2
            },
            error_y: {
                type: 'data',
                symmetric: false,
                color: 'rgba(255, 77, 22, 1)',
                array: [0.8, 0.2, 0.2, 0],
                arrayminus: [0, 0, 0.5, 1]
            },
            type: 'scatter'
        }];

        var layout = {
            title: 'Errores y otras desviaciones en gráficos de líneas',
            font: {
                family: '"Work Sans",sans-serif',
                size: 11,
                color: '#212529'
            },
            titlefont: {
                size: 16,
                color: '#212529'
            },
            yaxis: {
                title: 'Miles de unidades',
                range: [0, 5]
            },
            xaxis: {
                title: 'Años'
            },
            margin: {
                r: 10,
                t: 35,
                b: 40,
                l: 60
            },
            paper_bgcolor: '#f6f6f5',
            plot_bgcolor: '#f6f6f5'
        };
        Plotly.newPlot('error_1', data, layout, {
            displayModeBar: false
        });
    });

</script>