added onElementsClick feature

Author: renddiyeh

README.md

@@ -40,10 +40,23 @@ import {Doughnut} from 'react-chartjs-2';
 * data: PropTypes.object.isRequired,
 * height: PropTypes.number,
 * legend: PropTypes.object,
+* onElementsClick: PropTypes.func,
 * options: PropTypes.object,
 * redraw: PropTypes.bool,
 * width: PropTypes.number
 
+### Events
+
+#### onElementsClick (function)
+
+A function to be called when mouse clicked on chart elememts, will return all element at that point as an array. [Check](https://github.com/chartjs/Chart.js/blob/master/docs/09-Advanced.md#getelementsatevente)
+
+```
+{
+	onElementsClick: (elems) => {}
+	// `elems` is an array of chartElements
+}
+```
 
 ## Development (`src`, `lib` and the build process)
 

dist/react-chartjs-2.js

@@ -42,6 +42,7 @@ var ChartComponent = _react2['default'].createClass({
 		data: _react.PropTypes.object.isRequired,
 		height: _react.PropTypes.number,
 		legend: _react.PropTypes.object,
+		onElementsClick: _react.PropTypes.func,
 		options: _react.PropTypes.object,
 		redraw: _react.PropTypes.bool,
 		type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea']),
@@ -134,14 +135,25 @@ var ChartComponent = _react2['default'].createClass({
 		});
 	},
 
+	handleOnClick: function handleOnClick(evt) {
+		var elems = this.chart_instance.getElementsAtEvent(evt);
+		if (elems.length) {
+			var onElementsClick = this.props.onElementsClick;
+
+			onElementsClick(elems);
+		}
+	},
+
 	render: function render() {
 		var _props3 = this.props;
 		var height = _props3.height;
 		var width = _props3.width;
+		var onElementsClick = _props3.onElementsClick;
 
 		return _react2['default'].createElement('canvas', {
 			height: height,
-			width: width
+			width: width,
+			onClick: typeof onElementsClick === 'function' ? this.handleOnClick : null
 		});
 	}
 });

dist/react-chartjs-2.min.js

@@ -40,6 +40,7 @@ var ChartComponent = _react2['default'].createClass({
 		data: _react.PropTypes.object.isRequired,
 		height: _react.PropTypes.number,
 		legend: _react.PropTypes.object,
+		onElementsClick: _react.PropTypes.func,
 		options: _react.PropTypes.object,
 		redraw: _react.PropTypes.bool,
 		type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea']),
@@ -132,14 +133,25 @@ var ChartComponent = _react2['default'].createClass({
 		});
 	},
 
+	handleOnClick: function handleOnClick(evt) {
+		var elems = this.chart_instance.getElementsAtEvent(evt);
+		if (elems.length) {
+			var onElementsClick = this.props.onElementsClick;
+
+			onElementsClick(elems);
+		}
+	},
+
 	render: function render() {
 		var _props3 = this.props;
 		var height = _props3.height;
 		var width = _props3.width;
+		var onElementsClick = _props3.onElementsClick;
 
 		return _react2['default'].createElement('canvas', {
 			height: height,
-			width: width
+			width: width,
+			onClick: typeof onElementsClick === 'function' ? this.handleOnClick : null
 		});
 	}
 });

lib/Chart.js

@@ -11,10 +11,11 @@ const ChartComponent = React.createClass({
 		data: PropTypes.object.isRequired,
 		height: PropTypes.number,
 		legend: PropTypes.object,
+		onElementsClick: PropTypes.func,
 		options: PropTypes.object,
 		redraw: PropTypes.bool,
 		type: PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea']),
-		width: PropTypes.number
+		width: PropTypes.number,
 	},
 
 	getDefaultProps() {
@@ -26,7 +27,7 @@ const ChartComponent = React.createClass({
 			type: 'doughnut',
 			height: 200,
 			width: 200,
-			redraw: false
+			redraw: false,
 		};
 	},
 
@@ -94,13 +95,22 @@ const ChartComponent = React.createClass({
 		});
 	},
 
+	handleOnClick(evt) {
+		const elems = this.chart_instance.getElementsAtEvent(evt);
+		if (elems.length) {
+			const {onElementsClick} = this.props;
+			onElementsClick(elems);
+		}
+	},
+
 	render() {
-		const {height, width} = this.props;
+		const {height, width, onElementsClick} = this.props;
 
 		return (
 			<canvas
 				height={height}
 				width={width}
+				onClick={typeof onElementsClick === 'function' ? this.handleOnClick : null}
 			/>
 		);
 	}