From 92324a348de1199b74e570d30e23a64cd25432d5 Mon Sep 17 00:00:00 2001
From: acailly <antoine.cailly@ext.biomerieux.com>
Date: Tue, 25 Apr 2017 17:46:49 +0200
Subject: [PATCH] :sparkles: Now pass container element in listeners

---
 README.md              | 45 ++++++++++++++++++++++++++++++++++++++++++
 src/PlotlyComponent.js | 10 +++++-----
 2 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index ebabfad..c4e81d2 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+
 React-PlotlyJS [![npm version](https://badge.fury.io/js/react-plotlyjs.svg)](http://badge.fury.io/js/react-plotlyjs)
 =============
 
@@ -65,6 +66,50 @@ Here's a simple example render method:
       <PlotlyComponent className="whatever" data={data} layout={layout} config={config}/>
     );
   }
+```
+
+
+
+To add some interaction to the graph, you can use the following handlers:
+
+- onClick(data, graphDiv)
+- onBeforeHover(graphDiv)
+- onHover(data, graphDiv)
+- onUnHover(data, graphDiv)
+- onSelected(eventData, graphDiv)
+
+For more information, see https://plot.ly/javascript/plotlyjs-events/.
+
+```javascript
+
+function handler(data, graphDiv){
+  var pn='',
+      tn='',
+      colors=[];
+  for(var i=0; i < data.points.length; i++){
+    pn = data.points[i].pointNumber;
+    tn = data.points[i].curveNumber;
+    colors = data.points[i].data.marker.color;
+  };
+  colors[pn] = '#C54C82';
 
+  var update = {'marker':{color: colors, size:16}};
+  Plotly.restyle(graphDiv, update, [tn]);
+});
+
+render() {
+    let data = [
+      ...
+    ];
+    let layout = {                     
+      ...
+    };
+    let config = {
+      ...
+    };
+    return (
+      <PlotlyComponent className="whatever" data={data} layout={layout} config={config} onClick={handler}/>
+    );
+  }
 ```
 
diff --git a/src/PlotlyComponent.js b/src/PlotlyComponent.js
index 6c409a1..0f9ea28 100644
--- a/src/PlotlyComponent.js
+++ b/src/PlotlyComponent.js
@@ -16,15 +16,15 @@ let createPlotlyComponent = (plotlyInstance) => React.createClass({
 
   attachListeners: function() {
     if (this.props.onClick)
-      this.container.on('plotly_click', this.props.onClick);
+      this.container.on('plotly_click', (data) => this.props.onClick(data, this.container));
     if (this.props.onBeforeHover)
-      this.container.on('plotly_beforehover', this.props.onBeforeHover);
+      this.container.on('plotly_beforehover', () => this.props.onBeforeHover(this.container));
     if (this.props.onHover)
-      this.container.on('plotly_hover', this.props.onHover);
+      this.container.on('plotly_hover', (data) => this.props.onHover(data, this.container));
     if (this.props.onUnHover)
-      this.container.on('plotly_unhover', this.props.onUnHover);
+      this.container.on('plotly_unhover', (data) => this.props.onUnHover(data, this.container));
     if (this.props.onSelected)
-      this.container.on('plotly_selected', this.props.onSelected);
+      this.container.on('plotly_selected', (eventData) => this.props.onSelected(eventData, this.container));
   },
 
   shouldComponentUpdate(nextProps) {