JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js" defer></script>
<div id="myDiv2" style="width: 100%; height: auto; margin-bottom: 1em;"></div>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var trace1 = {
            x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
            y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
            name: "Datos A",
            type: 'scatter'
        };
        var trace2 = {
            x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
            y: [0, 4, 5, 1, 2, 2, 3, 4, 2],
            name: "Datos B",
            type: 'scatter'
        };
        var data4 = [trace1, trace2];
        var layout4 = {
            title: 'Anotaciones en gráfico de líneas',
            xaxis: {
                fixedrange: true
            },
            yaxis: {
                fixedrange: true
            },
            font: {
                family: '"Work Sans",Georgia,serif',
                size: 11,
                color: '#212529'
            },
            titlefont: {
                size: 16,
                color: '#212529'
            },
            showlegend: true,
            legend: {
                "orientation": "h",
            },
            annotations: [{
                x: 2,
                y: 5,
                xref: 'x',
                yref: 'y',
                text: 'Una anotación <br>en gráfico de líneas',
                showarrow: true,
                arrowhead: 7,
                ax: 0,
                ay: -40
            }, {
                x: 4,
                y: 4,
                xref: 'x',
                yref: 'y',
                text: 'Otra anotación<br>con un <a href="https://es.greenprace.org/es/">enlace</a>',
                showarrow: true,
                arrowhead: 7,
                ax: 0,
                ay: -40
            }],
            margin: {
                r: 0,
                t: 35,
                b: 20,
                l: 10
            },
            paper_bgcolor: '#f6f6f5',
...