Home Original page

Click `anywhere` feature by sleighsoft · Pull Request #5443 · plotly/plotly.js

This PR is meant as a point of discussion. Feel free to leave feedback.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../plotly.js/dist/plotly.js"></script>
</head>

<body>
    <div id="tester" style="width:600px;height:250px;"></div>
    <script>
        var TESTER = document.getElementById('tester');
        Plotly.newPlot(TESTER, [{
            x: [1, 2, 3, 4],
            y: [4, 1, 3, 5],
            mode: "lines+markers",
            marker: {size: 12},
        }], {
            margin: { t: 0 },
            clickmode: "event+anywhere"
        });
        TESTER.on('plotly_click', function(clickData) {
            var x = clickData["points"][0]["x"];
            Plotly.relayout(TESTER, {
                shapes: [
                {
                    type: "line",
                    x0: x,
                    y0: 0,
                    x1: x,
                    y1: 1,
                    yref: "paper",
                    line: {color: "RoyalBlue", width:3},
                }
                ]
            });
        });
    </script>
</body>
</html>