Skip to content

docs: improve code formatting in README.md #378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 26, 2019
Merged

docs: improve code formatting in README.md #378

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 38 additions & 45 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Then open [`localhost:6006`](http://localhost:6006) in a browser.
## Installation via NPM

```bash
npm install react-chartjs-2 chart.js --save
npm install --save react-chartjs-2 chart.js
```


Expand All @@ -50,7 +50,7 @@ npm install react-chartjs-2 chart.js --save
Check example/src/components/* for usage.

```js
import {Doughnut} from 'react-chartjs-2';
import { Doughnut } from 'react-chartjs-2';

<Doughnut data={...} />
```
Expand All @@ -74,30 +74,25 @@ In order for Chart.js to obey the custom size you need to set `maintainAspectRat

```js
<Bar
data={data}
width={100}
height={50}
options={{
maintainAspectRatio: false
}}
data={data}
width={100}
height={50}
options={{ maintainAspectRatio: false }}
/>
```

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

```js

chartReference = {};

componentDidMount() {
console.log(this.chartReference); // returns a Chart.js instance reference
console.log(this.chartReference); // returns a Chart.js instance reference
}

render() {
return (
<Doughnut ref={(reference) => this.chartReference = reference } data={data} />
)
return (<Doughnut ref={(reference) => this.chartReference = reference } data={data} />)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

perhaps you can shorten it a bit to this:

render() {
  return <Doughnut ref={chart => this.chartReference = chart} data={data} />;
}

or use the new React.createRef() API, maybe.

}
```

Expand All @@ -109,20 +104,18 @@ This approach is useful when you want to keep your components pure.

```js
render() {
const data = (canvas) => {
const ctx = canvas.getContext("2d")
const gradient = ctx.createLinearGradient(0,0,100,0);
...
return {
...
backgroundColor: gradient
...
}
}

return (
<Line data={data} />
)
const data = (canvas) => {
const ctx = canvas.getContext("2d")
const gradient = ctx.createLinearGradient(0,0,100,0);
...
return {
...
backgroundColor: gradient
...
}
}

return (<Line data={data} />)
}
```

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

merge(defaults, {
global: {
animation: false,
line: {
borderColor: '#F85F73',
},
},
global: {
animation: false,
line: {
borderColor: '#F85F73',
},
},
});
```

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

componentWillMount() {
Chart.pluginService.register({
afterDraw: function (chart, easing) {
// Plugin code.
}
});
Chart.pluginService.register({
afterDraw: function (chart, easing) {
// Plugin code.
}
});
}
```

Expand All @@ -182,9 +175,9 @@ A function to be called when mouse clicked on chart elememts, will return all el

```js
{
onElementsClick: (elems) => {},
getElementsAtEvent: (elems) => {},
// `elems` is an array of chartElements
onElementsClick: (elems) => {},
getElementsAtEvent: (elems) => {},
// `elems` is an array of chartElements
}

```
Expand All @@ -194,7 +187,7 @@ Calling getElementAtEvent(event) on your Chart instance passing an argument of a

```js
{
getElementAtEvent: (elems) => {},
getElementAtEvent: (elems) => {},
// => returns the first element at the event point.
}
```
Expand All @@ -205,8 +198,8 @@ Looks for the element under the event point, then returns all elements from that

```js
{
getDatasetAtEvent: (dataset) => {}
// `dataset` is an array of chartElements
getDatasetAtEvent: (dataset) => {}
// `dataset` is an array of chartElements
}
```

Expand All @@ -226,6 +219,6 @@ To build, watch and serve the examples (which will also watch the component sour

## License

MIT Licensed
[MIT Licensed](/LICENSE.md)
Copyright (c) 2017 Jeremy Ayerst