Handling clicks on our forecast graph

Let’s add one more feature to our weather application. When clicking on a specific point of our graph, we want to show the user in text the temperature at that date!

Setting up the click handler

The first thing we need to do is add an event listener to our graph. Thankfully, Plotly gives us a handy plotly_click event to listen to, like so:

// Called when a plot inside the DOM element with the id "someID" is clicked
document.getElementById('someID').on('plotly_click', function(data) {
  /* …do something here with the data… */
});

The nice thing about plotly_click is that it doesn’t pass you the event, it passes you a very useful data object. We care about two particular properties of that data object:

{
  "points": [{
    "x": "2016-07-29 03",
    "y": 17.4,
    /* …more data here… */
  }]
}

These tell us which date was clicked on and what the relevant temperature was, exactly what we want! We’ll pass a function down to the Plot component called onPlotClick that will get called when the plotly_click ...