Skip to content

Commit 929d1a6

Browse files
committed
Add data function docs to README
1 parent 76ad2ff commit 929d1a6

File tree

1 file changed

+26
-1
lines changed

1 file changed

+26
-1
lines changed

README.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import {Doughnut} from 'react-chartjs-2';
4848

4949
### Properties
5050

51-
* data: PropTypes.object.isRequired,
51+
* data: (PropTypes.object | PropTypes.func).isRequired,
5252
* width: PropTypes.number,
5353
* height: PropTypes.number,
5454
* legend: PropTypes.object,
@@ -87,6 +87,31 @@ render() {
8787
}
8888
```
8989

90+
### Getting context for data generation
91+
Canvas node and hence context, that can be used to create CanvasGradient background,
92+
is passed as argument to data if given as function:
93+
94+
This approach is useful when you want to keep your components pure.
95+
96+
```js
97+
render() {
98+
const data = (canvas) => {
99+
const ctx = canvas.getContext("2d")
100+
const gradient = ctx.createLinearGradient(0,0,100,0);
101+
...
102+
return {
103+
...
104+
backgroundColor: gradient
105+
...
106+
}
107+
}
108+
109+
return (
110+
<Line data={data} />
111+
)
112+
}
113+
```
114+
90115
### Chart.js Defaults
91116
Chart.js defaults can be set by importing the `defaults` object:
92117

0 commit comments

Comments
 (0)