GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing plotly.com — Click events in JavaScript

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})
    }
});

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.