Click Events in plotly.js

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

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.plot 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'),
    d3 = Plotly.d3,
    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:'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);
});

Create annotation on click event

var myPlot = document.getElementById('myDiv'),
    d3 = Plotly.d3,
    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:'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})
    }
});

plotly.js runs on all SVG-compatible browsers

plotly.js

Click Event Data

Binding to Click Events

Create annotation on click event

Contact Us