JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="431b0ba3-4351-429f-b345-1b83f8182fee" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("431b0ba3-4351-429f-b345-1b83f8182fee", [{"type": "scatter", "name": "", "ids": [13, 12, 9, 8, 11, 10], "y": [100, 200, 300, 400, 500, 600], "line": {"width": 1, "dash": "solid", "color": "rgb(0, 0, 0)"}, "mode": "markers", "x": [22123111056.2, 22982817595.6, 8464146987.98, 9729330372.56, 17227510913.3, 10830022855.3], "customdata": "shape_area", "hoverinfo": "all", "opacity": 1.0, "marker": {"symbol": 0, "size": 10, "color": "rgb(0, 0, 0)", "line": {"width": 1, "color": "rgb(0, 0, 0)"}}, "text": ["Emilia-Romagna        8", "Toscana        9", "Umbria        10", "Marche        11", "Lazio        12", "Abruzzo        13"]}], {"xaxis": {"rangeslider": {"visible": false, "borderwidth": 1}, "title": "shape_area", "type": "linear", "autorange": true}, "yaxis": {"title": "prova1", "type": "linear", "autorange": true}, "showlegend": true, "title": ""}, {"linkText": "Export to plot.ly", "showLink": false})</script>

JavaScript

var plotly_div = document.getElementById('431b0ba3-4351-429f-b345-1b83f8182fee')
var plotly_data = plotly_div.data

// clicking function
plotly_div.on('plotly_click', function(data){


  console.log(data.points[0])


})