Skip to content

Commit 649b16e

Browse files
JPeer264apertureless
authored andcommitted
Docs: add typescript usage (#484)
Closes #313
1 parent 93aab32 commit 649b16e

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,33 @@ export default {
106106
}
107107
```
108108

109+
or in TypeScript
110+
111+
```ts
112+
// CommitChart.ts
113+
import { Bar } from 'vue-chartjs';
114+
import { Component } from 'vue-property-decorator';
115+
116+
@Component({
117+
extends: Bar, // this is important to add the functionality to your component
118+
})
119+
export default class CommitChart extends Vue<Bar> {
120+
mounted () {
121+
// Overwriting base render method with actual data.
122+
this.renderChart({
123+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
124+
datasets: [
125+
{
126+
label: 'GitHub Commits',
127+
backgroundColor: '#f87979',
128+
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
129+
}
130+
]
131+
})
132+
}
133+
}
134+
```
135+
109136
Then simply import and use your own extended component and use it like a normal vue component
110137

111138
```javascript

0 commit comments

Comments
 (0)