@@ -41,7 +41,7 @@ Then open [`localhost:6006`](http://localhost:6006) in a browser.
41
41
## Installation via NPM
42
42
43
43
``` bash
44
- npm install react-chartjs-2 chart.js --save
44
+ npm install --save react-chartjs-2 chart.js
45
45
```
46
46
47
47
@@ -50,7 +50,7 @@ npm install react-chartjs-2 chart.js --save
50
50
Check example/src/components/* for usage.
51
51
52
52
``` js
53
- import {Doughnut } from ' react-chartjs-2' ;
53
+ import { Doughnut } from ' react-chartjs-2' ;
54
54
55
55
< Doughnut data= {... } / >
56
56
```
@@ -74,30 +74,25 @@ In order for Chart.js to obey the custom size you need to set `maintainAspectRat
74
74
75
75
``` js
76
76
< 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 }}
83
81
/ >
84
82
```
85
83
86
84
### Chart.js instance
87
85
Chart.js instance can be accessed by placing a ref to the element as:
88
86
89
87
``` js
90
-
91
88
chartReference = {};
92
89
93
90
componentDidMount () {
94
- console .log (this .chartReference ); // returns a Chart.js instance reference
91
+ console .log (this .chartReference ); // returns a Chart.js instance reference
95
92
}
96
93
97
94
render () {
98
- return (
99
- < Doughnut ref= {(reference ) => this .chartReference = reference } data= {data} / >
100
- )
95
+ return (< Doughnut ref= {(reference ) => this .chartReference = reference } data= {data} / > )
101
96
}
102
97
```
103
98
@@ -109,20 +104,18 @@ This approach is useful when you want to keep your components pure.
109
104
110
105
``` js
111
106
render () {
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} / > )
126
119
}
127
120
```
128
121
@@ -145,12 +138,12 @@ import merge from 'lodash.merge';
145
138
// import { merge } from 'lodash';
146
139
147
140
merge (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
+ },
154
147
});
155
148
```
156
149
@@ -162,11 +155,11 @@ You can access the internal Chart.js object to register plugins or extend charts
162
155
import { Chart } from ' react-chartjs-2' ;
163
156
164
157
componentWillMount () {
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
+ });
170
163
}
171
164
```
172
165
@@ -182,9 +175,9 @@ A function to be called when mouse clicked on chart elememts, will return all el
182
175
183
176
``` js
184
177
{
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
188
181
}
189
182
190
183
```
@@ -194,7 +187,7 @@ Calling getElementAtEvent(event) on your Chart instance passing an argument of a
194
187
195
188
``` js
196
189
{
197
- getElementAtEvent : (elems ) => {},
190
+ getElementAtEvent : (elems ) => {},
198
191
// => returns the first element at the event point.
199
192
}
200
193
```
@@ -205,8 +198,8 @@ Looks for the element under the event point, then returns all elements from that
205
198
206
199
``` js
207
200
{
208
- getDatasetAtEvent : (dataset ) => {}
209
- // `dataset` is an array of chartElements
201
+ getDatasetAtEvent : (dataset ) => {}
202
+ // `dataset` is an array of chartElements
210
203
}
211
204
```
212
205
@@ -226,6 +219,6 @@ To build, watch and serve the examples (which will also watch the component sour
226
219
227
220
## License
228
221
229
- MIT Licensed
222
+ [ MIT Licensed] ( /LICENSE.md )
230
223
Copyright (c) 2017 Jeremy Ayerst
231
224
0 commit comments