Plotly.js returns unexpected data when 'plotly_click' event is fired

Question

I am having trouble binding the plotly_click event to my bar chart in plotly.js. From all of the documentation / posts I've seen (see links above), the data passed from the event to the callback should be structured like the following:

{
  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 */
  }]
}

However, when my click event is triggered, I am see the following:

{
  currentTarget: div#containers-per-month-chart.js-plotly-plot
  data: undefined
  delegateTarget: div#containers-per-month-chart.js-plotly-plot
  handleObj: {type: "plotly_click", origType: "plotly_click", data: undefined, handler: ƒ, guid: 37, …}
  isTrigger: 3
  jQuery111208711647541870211: true
  namespace: ""
  namespace_re: null
  result: undefined
  target: div#containers-per-month-chart.js-plotly-plot
  timeStamp: 1572448651720
  type: "plotly_click"
  __proto__: Object
}

Does anybody know why the json I am receiving is different from what is documented? I am creating my chart and binding the click event as the document shows.

Here is how I am creating my chart:

Plotly.newPlot('my-plotly-bar-chart', data, layout, config);

Here is how I am binding the click event:

$('#my-plotly-bar-chart').on('plotly_click', function (data) {
                    console.log(data)
                });

(I figured out my issue in the middle of writing this question, but in the spirit of Self Answering to Document for others I figured I would still post the question and answer this myself.)

koolahman · Accepted Answer · 2019-10-30 15:37:27Z

6

I am using Plotly.js v1.50.1

The issue is caused because the click event should be setup to accept two arguments in the callback function, not one as shown in the documentation.

As documented:

var myPlot = document.getElementById('myDiv');

// ... other setup here...

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

myPlot.on('plotly_click', function(data){
  // do some stuff
});

However, my solution looks like:

var myPlot = document.getElementById('myDiv');

// ... other setup here...

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

myPlot.on('plotly_click', function(arg1,arg2){
  // do some stuff
});

arg2 is the object we want, and looks like

{
    event: { ... }
    points: [
      {data: {…}, fullData: {…}, curveNumber: 0, pointNumber: 0, pointIndex: 0, …}
      {data: {…}, fullData: {…}, curveNumber: 1, pointNumber: 0, pointIndex: 0, …}
    ]

}

From there, we can extract the data from each point, which is as documented.

answered Oct 30, 2019 at 15:37

koolahman

4254 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saleem Khan Over a year ago

This helped me out. Interestingly, I had to use jquery too - using v 1.52.3

Qbik Over a year ago

is my issue the same as above : stackoverflow.com/questions/65957122/… ?

Collectives™ on Stack Overflow

Plotly.js returns unexpected data when 'plotly_click' event is fired

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related