Skip to content

Commit 3c1936a

Browse files
tobiasbuescheljerairrest
authored andcommitted
docs: improve code formatting in README.md (#378)
Thanks!
1 parent 3d13c37 commit 3c1936a

File tree

1 file changed

+38
-45
lines changed

1 file changed

+38
-45
lines changed

README.md

Lines changed: 38 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -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
5050
Check 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
8785
Chart.js instance can be accessed by placing a ref to the element as:
8886

8987
```js
90-
9188
chartReference = {};
9289

9390
componentDidMount() {
94-
console.log(this.chartReference); // returns a Chart.js instance reference
91+
console.log(this.chartReference); // returns a Chart.js instance reference
9592
}
9693

9794
render() {
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
111106
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} />)
126119
}
127120
```
128121

@@ -145,12 +138,12 @@ import merge from 'lodash.merge';
145138
// import { merge } from 'lodash';
146139

147140
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+
},
154147
});
155148
```
156149

@@ -162,11 +155,11 @@ You can access the internal Chart.js object to register plugins or extend charts
162155
import { Chart } from 'react-chartjs-2';
163156

164157
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+
});
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)
230223
Copyright (c) 2017 Jeremy Ayerst
231224

0 commit comments

Comments
 (0)