JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js" defer></script>
<div id="myDiv"></div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var data3 = [{
            x: ['perros', 'gatos', 'personas'],
            y: [20, 14, 23],
            type: 'bar'
        }];

        var layout3 = {
            title: 'Anotaciones en diagrama de barras',
            font: {
                family: '"Work Sans",sans-serif',
                size: 11,
                color: '#212529'
            },
            titlefont: {
                size: 16,
                color: '#212529'
            },
            annotations: [{
                x: 1,
                y: 14,
                xref: 'x',
                yref: 'y',
                text: 'Ejemplo de anotación<br>en diagrama de barras',
                showarrow: true,
                arrowhead: 7,
                ax: 0,
                ay: -70
            }],
            margin: {
                r: 10,
                t: 35,
                b: 40,
                l: 60
            },
            paper_bgcolor: '#f6f6f5',
            plot_bgcolor: '#f6f6f5'

        }

        Plotly.newPlot('myDiv', data3, layout3, {
            displayModeBar: false
        });

    });

</script>