1 | ### Usage
|
2 | ```typescript
|
3 | import { ChartsModule } from 'ng2-charts';
|
4 |
|
5 | // In your App's module:
|
6 | imports: [
|
7 | ChartsModule
|
8 | ]
|
9 | ```
|
10 |
|
11 | ### Chart types
|
12 | There are one directive for all chart types: `base-chart`, and there are 6 types of charts: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`.
|
13 |
|
14 | ### Properties
|
15 |
|
16 | **Note**: For more information about possible options please refer to original [chart.js](http://www.chartjs.org/docs) documentation
|
17 |
|
18 | - `data` (`Array<number[]> | number[]`) - set of points of the chart, it should be `Array<number[]>` only for `line`, `bar` and `radar`, otherwise `number[]`
|
19 | - `datasets` (`Array<{data: Array<number[]> | number[], label: string}>`) - `data` see about, the `label` for the dataset which appears in the legend and tooltips
|
20 | - `labels` (`?Array<any>`) - x axis labels. It's necessary for charts: `line`, `bar` and `radar`. And just labels (on hover) for charts: `polarArea`, `pie` and `doughnut`
|
21 | - `chartType` (`?string`) - indicates the type of charts, it can be: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`
|
22 | - `options` (`?any`) - chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
|
23 | - `colors` (`?Array<any>`) - data colors, will use default and|or random colors if not specified (see below)
|
24 | - `legend`: (`?boolean=false`) - if true show legend below the chart, otherwise not be shown
|
25 |
|
26 | ### Events
|
27 |
|
28 | - `chartClick`: fires when click on a chart has occurred, returns information regarding active points and labels
|
29 | - `chartHover`: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels
|
30 |
|
31 |
|
32 | ### Colors
|
33 |
|
34 | There are a set several default colors. Colors can be replaced using the `colors` attribute. If there is more data than colors, colors are generated randomly.
|