Click Events in JavaScript

How to bind callback functions to click events in D3.js-based JavaScript charts.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Click Event Data

{
  points: [{
    curveNumber: 2,  // index in data of the trace associated with the selected point
    pointNumber: 2,  // index of the selected point
    x: 5,        // x value
    y: 600,      // y value
    data: {/* */},       // ref to the trace as sent to Plotly.newPlot associated with the selected point
    fullData: {/* */},   // ref to the trace including all the defaults
   xaxis: {/* */},   // ref to x-axis object (i.e layout.xaxis) associated with the selected point
   yaxis: {/* */}    // ref to y-axis object " "
  }, {
    /* similarly for other selected points */
  }]
}

Binding to Click Events

var myPlot = document.getElementById('myDiv'),
    N = 16,
    x = d3.range(N),
    y = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y, type:'scatter',
            mode:'markers', marker:{size:16} } ],
    layout = {
        hovermode:'closest',
        title: {text: 'Click on Points'}
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(data){
    var pts = '';
    for(var i=0; i < data.points.length; i++){
        pts = 'x = '+data.points[i].x +'\ny = '+
            data.points[i].y.toPrecision(4) + '\n\n';
    }
    alert('Closest point clicked:\n\n'+pts);
});

Click Anywhere in the Plot Area

New in 3.5

By default, plotly_click fires only when the click lands on a trace. Set clickanywhere to true in the layout, and the event also fires on empty plot space.

An event from empty space carries an empty points array. The event reports the click position in two forms. xvals and yvals hold data-space coordinates. xPixel and yPixel hold pixels from the top-left corner of the graph div.

clickanywhere works on its own. The layout does not need hoveranywhere.

var data = [{
  x: [1, 2, 3, 4, 5],
  y: [2, 4, 3, 5, 4],
  type: 'scatter',
  mode: 'markers',
  marker: {size: 14}
}];

var layout = {
  title: {text: 'Click Anywhere'},
  hovermode: 'closest',
  clickanywhere: true,
  annotations: [{
    text: 'Click anywhere in the plot area',
    xref: 'paper',
    yref: 'paper',
    x: 0.02,
    y: 0.98,
    xanchor: 'left',
    yanchor: 'top',
    showarrow: false
  }]
};

Plotly.newPlot('myDiv', data, layout);

document.getElementById('myDiv').on('plotly_click', function(eventData) {
  var text;

  if (eventData.points.length) {
    var point = eventData.points[0];
    text = 'Point: x = ' + point.x + ', y = ' + point.y;
  } else {
    // points is empty over blank space, so read the click position from xvals and yvals
    text = 'Empty space: x = ' + eventData.xvals[0].toFixed(2) +
      ', y = ' + eventData.yvals[0].toFixed(2);
  }

  Plotly.relayout('myDiv', {'annotations[0].text': text});
});

Create annotation on click event

var myPlot = document.getElementById('myDiv'),
    N = 100,
    x = d3.range(N),
    y1 = d3.range(N).map( d3.random.normal() ),
    y2 = d3.range(N).map( d3.random.normal(-2) ),
    y3 = d3.range(N).map( d3.random.normal(2) ),
    trace1 = { x:x, y:y1, type:'scatter', mode:'lines', name:'Jeff' },
    trace2 = { x:x, y:y2, type:'scatter', mode:'lines', name:'Terren' },
    trace3 = { x:x, y:y3, type:'scatter', mode:'lines', name:'Arthur' },
    data = [ trace1, trace2, trace3 ],
    layout = {
        hovermode:'closest',
        title: {text: 'Click on Points to add an Annotation on it'}
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(data){
    var pts = '';
    for(var i=0; i < data.points.length; i++){
        annotate_text = 'x = '+data.points[i].x +
                      'y = '+data.points[i].y.toPrecision(4);

        annotation = {
          text: annotate_text,
          x: data.points[i].x,
          y: parseFloat(data.points[i].y.toPrecision(4))
        }

        annotations = self.layout.annotations || [];
        annotations.push(annotation);
        Plotly.relayout('myDiv',{annotations: annotations})
    }
});