File tree Expand file tree Collapse file tree 1 file changed +26
-1
lines changed Expand file tree Collapse file tree 1 file changed +26
-1
lines changed Original file line number Diff line number Diff line change @@ -48,7 +48,7 @@ import {Doughnut} from 'react-chartjs-2';
48
48
49
49
### Properties
50
50
51
- * data: PropTypes.object.isRequired,
51
+ * data: ( PropTypes.object | PropTypes.func) .isRequired,
52
52
* width: PropTypes.number,
53
53
* height: PropTypes.number,
54
54
* legend: PropTypes.object,
@@ -87,6 +87,31 @@ render() {
87
87
}
88
88
```
89
89
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
+
90
115
### Chart.js Defaults
91
116
Chart.js defaults can be set by importing the ` defaults ` object:
92
117
You can’t perform that action at this time.
0 commit comments