@@ -41,7 +41,7 @@ Then open [`localhost:6006`](http://localhost:6006) in a browser.
4141## Installation via NPM
4242
4343``` bash
44- npm install react-chartjs-2 chart.js --save
44+ npm install --save react-chartjs-2 chart.js
4545```
4646
4747
@@ -50,7 +50,7 @@ npm install react-chartjs-2 chart.js --save
5050Check example/src/components/* for usage.
5151
5252``` js
53- import {Doughnut } from ' react-chartjs-2' ;
53+ import { Doughnut } from ' react-chartjs-2' ;
5454
5555< Doughnut data= {... } / >
5656```
@@ -74,30 +74,25 @@ In order for Chart.js to obey the custom size you need to set `maintainAspectRat
7474
7575``` js
7676< Bar
77- data= {data}
78- width= {100 }
79- height= {50 }
80- options= {{
81- maintainAspectRatio: false
82- }}
77+ data= {data}
78+ width= {100 }
79+ height= {50 }
80+ options= {{ maintainAspectRatio: false }}
8381/ >
8482```
8583
8684### Chart.js instance
8785Chart.js instance can be accessed by placing a ref to the element as:
8886
8987``` js
90-
9188chartReference = {};
9289
9390componentDidMount () {
94- console .log (this .chartReference ); // returns a Chart.js instance reference
91+ console .log (this .chartReference ); // returns a Chart.js instance reference
9592}
9693
9794render () {
98- return (
99- < Doughnut ref= {(reference ) => this .chartReference = reference } data= {data} / >
100- )
95+ return (< Doughnut ref= {(reference ) => this .chartReference = reference } data= {data} / > )
10196}
10297```
10398
@@ -109,20 +104,18 @@ This approach is useful when you want to keep your components pure.
109104
110105``` js
111106render () {
112- const data = (canvas ) => {
113- const ctx = canvas .getContext (" 2d" )
114- const gradient = ctx .createLinearGradient (0 ,0 ,100 ,0 );
115- ...
116- return {
117- ...
118- backgroundColor: gradient
119- ...
120- }
121- }
122-
123- return (
124- < Line data= {data} / >
125- )
107+ const data = (canvas ) => {
108+ const ctx = canvas .getContext (" 2d" )
109+ const gradient = ctx .createLinearGradient (0 ,0 ,100 ,0 );
110+ ...
111+ return {
112+ ...
113+ backgroundColor: gradient
114+ ...
115+ }
116+ }
117+
118+ return (< Line data= {data} / > )
126119}
127120```
128121
@@ -145,12 +138,12 @@ import merge from 'lodash.merge';
145138// import { merge } from 'lodash';
146139
147140merge (defaults, {
148- global: {
149- animation: false ,
150- line: {
151- borderColor: ' #F85F73' ,
152- },
153- },
141+ global: {
142+ animation: false ,
143+ line: {
144+ borderColor: ' #F85F73' ,
145+ },
146+ },
154147});
155148```
156149
@@ -162,11 +155,11 @@ You can access the internal Chart.js object to register plugins or extend charts
162155import { Chart } from ' react-chartjs-2' ;
163156
164157componentWillMount () {
165- Chart .pluginService .register ({
166- afterDraw : function (chart , easing ) {
167- // Plugin code.
168- }
169- });
158+ Chart .pluginService .register ({
159+ afterDraw : function (chart , easing ) {
160+ // Plugin code.
161+ }
162+ });
170163}
171164```
172165
@@ -182,9 +175,9 @@ A function to be called when mouse clicked on chart elememts, will return all el
182175
183176``` js
184177{
185- onElementsClick : (elems ) => {},
186- getElementsAtEvent : (elems ) => {},
187- // `elems` is an array of chartElements
178+ onElementsClick : (elems ) => {},
179+ getElementsAtEvent : (elems ) => {},
180+ // `elems` is an array of chartElements
188181}
189182
190183```
@@ -194,7 +187,7 @@ Calling getElementAtEvent(event) on your Chart instance passing an argument of a
194187
195188``` js
196189{
197- getElementAtEvent : (elems ) => {},
190+ getElementAtEvent : (elems ) => {},
198191 // => returns the first element at the event point.
199192}
200193```
@@ -205,8 +198,8 @@ Looks for the element under the event point, then returns all elements from that
205198
206199``` js
207200{
208- getDatasetAtEvent : (dataset ) => {}
209- // `dataset` is an array of chartElements
201+ getDatasetAtEvent : (dataset ) => {}
202+ // `dataset` is an array of chartElements
210203}
211204```
212205
@@ -226,6 +219,6 @@ To build, watch and serve the examples (which will also watch the component sour
226219
227220## License
228221
229- MIT Licensed
222+ [ MIT Licensed] ( /LICENSE.md )
230223Copyright (c) 2017 Jeremy Ayerst
231224
0 commit comments