add event doc. in readme

Author: Sumo

README.md

@@ -184,6 +184,133 @@ ReactDOM.render(
 );
 ```
 
+## Working with Events
+
+To attach event callbacks to a FusionCharts component, follow the pattern below.
+
+Write the callback:
+
+As a separate function:
+
+```javascript
+var chartEventCallback  = function (eventObj, dataObj) {
+	[Code goes here]
+}
+```
+
+Or, as a component class method:
+```javascript
+chartEventCallback (eventObj, dataObj) {
+	[Code goes here]
+}
+```
+
+Attach the callback to an event through the React-FC component:
+```javascript
+<ReactFC {...chartConfigs} fcEvent-EVENTNAME={this.chartEventCallback} />
+```
+Where, EVENTNAME is to be replaced by the event you want to track.
+
+##### Consider the example below that tracks hover events on a data plot.
+
+```javascript
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import FusionCharts from 'fusioncharts/core';
+import Column2D from 'fusioncharts/viz/column2d';
+import ReactFC from 'react-fusioncharts';
+import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';
+
+ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);
+
+const myDataSource = {
+    "chart": {
+        "caption": "Countries With Most Oil Reserves [2017-18]",
+        "subCaption": "In MMbbl = One Million barrels",
+        "xAxisName": "Country",
+        "yAxisName": "Reserves (MMbbl)",
+        "numberSuffix": "K",
+        "theme": "fusion"
+    },
+    "data": [
+        {
+            "label": "Venezuela",
+            "value": "290"
+        },
+        {
+            "label": "Saudi",
+            "value": "260"
+        },
+        {
+            "label": "Canada",
+            "value": "180"
+        },
+        {
+            "label": "Iran",
+            "value": "140"
+        },
+        {
+            "label": "Russia",
+            "value": "115"
+        },
+        {
+            "label": "UAE",
+            "value": "100"
+        },
+        {
+            "label": "US",
+            "value": "30"
+        },
+        {
+            "label": "China",
+            "value": "30"
+        }
+    ]
+};
+
+const chartConfigs = {
+  type: 'column2d',
+  width: 600,
+  height: 400,
+  dataFormat: 'json',
+  dataSource: myDataSource,
+};
+
+class Chart extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      actualValue: 'Hover on the plot to see the value along with the label',
+    };
+
+    this.showPlotValue = this.showPlotValue.bind(this);
+  }
+
+  // Event callback handler for 'dataplotRollOver'.
+  // Shows the value of the hovered plot on the page.
+  showPlotValue(eventObj, dataObj) {
+    this.setState({
+      actualValue: `You’re are currently hovering over ${dataObj.categoryLabel} whose value is ${dataObj.displayValue}`,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <ReactFC {...chartConfigs} fcEvent-dataplotRollOver={this.showPlotValue} />
+        <p style={{ padding: '10px', background: '#f5f2f0' }}>{this.state.actualValue}</p>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <Chart />,
+  document.getElementById('root'),
+);
+```
+
 
 ## Test