Skip to content

Commit 93f7c30

Browse files
authored
docs: add faq docs on typescript (#1042)
1 parent 671da08 commit 93f7c30

File tree

2 files changed

+30
-0
lines changed

2 files changed

+30
-0
lines changed

website/docs/faq/docs.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,8 @@ exports.docs = [
2424
title: 'How to fix "... is not a registered scale" error?',
2525
slug: '/faq/registered-scale',
2626
},
27+
{
28+
title: 'How to use react-chartjs-2 with TypeScript?',
29+
slug: '/faq/typescript',
30+
},
2731
];

website/docs/faq/typescript.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
slug: /faq/typescript
3+
---
4+
5+
# How to use react-chartjs-2 with TypeScript?
6+
7+
TypeScript has extremely robust type inference capabilities and most of the time
8+
we can enjoy type safety and autocompletion without having to do any extra work.
9+
10+
But occasionally types need to be set explicitly. They can be imported from `Chart.js`:
11+
12+
```typescript
13+
import type { ChartData, ChartOptions } from 'chart.js';
14+
```
15+
16+
...and then used with `options` and `data` props:
17+
18+
```typescript
19+
interface LineProps {
20+
options: ChartOptions<'line'>;
21+
data: ChartData<'line'>;
22+
}
23+
```
24+
25+
The generic type being passed is a `ChartType` that can be one of the following values:
26+
`'bar'`, `'line'`, `'scatter'`, `'bubble'`, `'pie'`, `'doughnut'`, `'polarArea'` or `'radar'`.

0 commit comments

Comments
 (0)