Skip to content

Commit

Permalink
Chart instance can be acquired by using refs
Browse files Browse the repository at this point in the history 
Update readme with chart instance example
  • Loading branch information
@gor181
gor181 committed Aug 6, 2016
1 parent 498d1d2 commit 0e4e6a7
Show file tree
Hide file tree
Showing 5 changed files with 479 additions and 73 deletions.
14 changes: 14 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,20 @@ import {Doughnut} from 'react-chartjs-2';
* redraw: PropTypes.bool,
* width: PropTypes.number

### Chart instance
Chart instance can be accessed by placing a ref to the element as:

```
render() {
componentDidMount() {
console.log(this.refs.chart.chart_instance); // returns a Chart.js instance reference
}
return (
<Doughnut ref='chart' data={data} />
)
}
```

### Events

#### onElementsClick (function)
Expand Down
226 changes: 197 additions & 29 deletions dist/react-chartjs-2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ Object.defineProperty(exports, '__esModule', {
value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

exports.Doughnut = Doughnut;
exports.Pie = Pie;
exports.Line = Line;
exports.Bar = Bar;
exports.HorizontalBar = HorizontalBar;
exports.Radar = Radar;
exports.Polar = Polar;
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);

var _react2 = _interopRequireDefault(_react);
Expand Down Expand Up @@ -156,33 +156,201 @@ var ChartComponent = _react2['default'].createClass({

exports['default'] = ChartComponent;

function Doughnut(props) {
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'doughnut' }));
}
var Doughnut = (function (_React$Component) {
_inherits(Doughnut, _React$Component);

function Doughnut() {
_classCallCheck(this, Doughnut);

_get(Object.getPrototypeOf(Doughnut.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Doughnut, [{
key: 'render',
value: function render() {
var _this = this;

return _react2['default'].createElement(ChartComponent, _extends({}, this.props, {
ref: function (ref) {
return _this.chart_instance = ref && ref.chart_instance;
},
type: 'doughnut'
}));
}
}]);

return Doughnut;
})(_react2['default'].Component);

exports.Doughnut = Doughnut;

var Pie = (function (_React$Component2) {
_inherits(Pie, _React$Component2);

function Pie() {
_classCallCheck(this, Pie);

_get(Object.getPrototypeOf(Pie.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Pie, [{
key: 'render',
value: function render() {
var _this2 = this;

return _react2['default'].createElement(ChartComponent, _extends({}, this.props, {
ref: function (ref) {
return _this2.chart_instance = ref && ref.chart_instance;
},
type: 'pie'
}));
}
}]);

return Pie;
})(_react2['default'].Component);

exports.Pie = Pie;

var Line = (function (_React$Component3) {
_inherits(Line, _React$Component3);

function Line() {
_classCallCheck(this, Line);

_get(Object.getPrototypeOf(Line.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Line, [{
key: 'render',
value: function render() {
var _this3 = this;

return _react2['default'].createElement(ChartComponent, _extends({}, this.props, {
ref: function (ref) {
return _this3.chart_instance = ref && ref.chart_instance;
},
type: 'line'
}));
}
}]);

return Line;
})(_react2['default'].Component);

exports.Line = Line;

var Bar = (function (_React$Component4) {
_inherits(Bar, _React$Component4);

function Bar() {
_classCallCheck(this, Bar);

_get(Object.getPrototypeOf(Bar.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Bar, [{
key: 'render',
value: function render() {
var _this4 = this;

return _react2['default'].createElement(ChartComponent, _extends({}, this.props, {
ref: function (ref) {
return _this4.chart_instance = ref && ref.chart_instance;
},
type: 'bar'
}));
}
}]);

return Bar;
})(_react2['default'].Component);

exports.Bar = Bar;

var HorizontalBar = (function (_React$Component5) {
_inherits(HorizontalBar, _React$Component5);

function HorizontalBar() {
_classCallCheck(this, HorizontalBar);

_get(Object.getPrototypeOf(HorizontalBar.prototype), 'constructor', this).apply(this, arguments);
}

function Pie(props) {
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'pie' }));
}
_createClass(HorizontalBar, [{
key: 'render',
value: function render() {
var _this5 = this;

return _react2['default'].createElement(ChartComponent, _extends({}, this.props, {
ref: function (ref) {
return _this5.chart_instance = ref && ref.chart_instance;
},
type: 'horizontalBar'
}));
}
}]);

return HorizontalBar;
})(_react2['default'].Component);

function Line(props) {
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'line' }));
}
exports.HorizontalBar = HorizontalBar;

function Bar(props) {
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'bar' }));
}
var Radar = (function (_React$Component6) {
_inherits(Radar, _React$Component6);

function HorizontalBar(props) {
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'horizontalBar' }));
}
function Radar() {
_classCallCheck(this, Radar);

_get(Object.getPrototypeOf(Radar.prototype), 'constructor', this).apply(this, arguments);
}

function Radar(props) {
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'radar' }));
}
_createClass(Radar, [{
key: 'render',
value: function render() {
var _this6 = this;

return _react2['default'].createElement(ChartComponent, _extends({}, this.props, {
ref: function (ref) {
return _this6.chart_instance = ref && ref.chart_instance;
},
type: 'radar'
}));
}
}]);

return Radar;
})(_react2['default'].Component);

exports.Radar = Radar;

function Polar(props) {
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'polarArea' }));
}
var Polar = (function (_React$Component7) {
_inherits(Polar, _React$Component7);

function Polar() {
_classCallCheck(this, Polar);

_get(Object.getPrototypeOf(Polar.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Polar, [{
key: 'render',
value: function render() {
var _this7 = this;

return _react2['default'].createElement(ChartComponent, _extends({}, this.props, {
ref: function (ref) {
return _this7.chart_instance = ref && ref.chart_instance;
},
type: 'polarArea'
}));
}
}]);

return Polar;
})(_react2['default'].Component);

exports.Polar = Polar;

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./utils/deepEqual":2,"chart.js":undefined,"react-dom":undefined}],2:[function(require,module,exports){
Expand Down
Loading

0 comments on commit 0e4e6a7

Please sign in to comment.