| 1 | # Chartjs-ng2
|
| 2 | - - -
|
| 3 |
|
| 4 | ### Installation
|
| 5 |
|
| 6 | 1. You can install ***chartjs-ng2*** using npm
|
| 7 |
|
| 8 | ```bash
|
| 9 | npm install chartjs-ng2 --save
|
| 10 | ```
|
| 11 | 2. You need to install and include `Chart.js` library in application via `html` or `webpack bundler` (more options can be found in official `chart.js` [documentation](http://www.chartjs.org/docs/#getting-started))
|
| 12 |
|
| 13 | ```bash
|
| 14 | npm install chart.js --save
|
| 15 | ```
|
| 16 |
|
| 17 | **Important**: Embedding `Chart.js` in application is mandatory!
|
| 18 |
|
| 19 | ```html
|
| 20 | <script src="node_modules/chart.js/src/chart.js"></script>
|
| 21 | ```
|
| 22 |
|
| 23 |
|
| 24 | ### System.js
|
| 25 |
|
| 26 | System.js bundles can be found in `bundles` directory of npm package or at [npm cdn](https://npmcdn.com/chartjs-ng2/bundles/)
|
| 27 |
|
| 28 |
|
| 29 | ## API
|
| 30 |
|
| 31 | ### Import
|
| 32 | ```typescript
|
| 33 | import { NgChartModule } from 'chartjs-ng2/chartjs-ng2';
|
| 34 |
|
| 35 | // In your App's module:
|
| 36 | imports: [
|
| 37 | NgChartModule
|
| 38 | ]
|
| 39 | ```
|
| 40 |
|
| 41 | ### Chart types
|
| 42 | There are one directive for all chart types: `base-chart`, and there are 6 types of charts: , `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`.
|
| 43 |
|
| 44 | ### Properties
|
| 45 |
|
| 46 | **Note**: For more information about possible options please refer to original [chart.js](http://www.chartjs.org/docs) documentation
|
| 47 |
|
| 48 | - `data` (`Array<number[]> | number[]`) - set of points of the chart, it should be `Array<number[]>` only for `line`, `bar` and `radar`, otherwise `number[]`;
|
| 49 | - `datasets` (`Array<{data: Array<number[]> | number[], label: string}>`) - `data` see about, the `label` for the dataset which appears in the legend and tooltips
|
| 50 | - `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`
|
| 51 | - `chartType` (`?string`) - indicates the type of charts, it can be: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`
|
| 52 | - `options` (`?any`) - chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
|
| 53 | - `colors` (`?Array<any>`) - data colors, will use default and|or random colors if not specified (see below)
|
| 54 | - `legend`: (`?boolean=false`) - if true show legend below the chart, otherwise not be shown
|
| 55 |
|
| 56 | ### Events
|
| 57 |
|
| 58 | - `chartClick`: fires when click on a chart has occurred, returns information regarding active points and labels
|
| 59 | - `chartHover`: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels
|
| 60 |
|
| 61 |
|
| 62 | ### Colors
|
| 63 |
|
| 64 | 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.
|
| 65 |
|
| 66 |
|
| 67 | ## Troubleshooting
|
| 68 |
|
| 69 | Please follow this guidelines when reporting bugs and feature requests:
|
| 70 |
|
| 71 | 1. Use [GitHub Issues](https://github.com/ravid7000/chartjs-ng2/issues) board to report bugs and feature requests (not our email address)
|
| 72 | 2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
|
| 73 |
|
| 74 | Thanks for understanding!
|
| 75 |
|
| 76 | ### License
|
| 77 |
|
| 78 | The MIT License (see the [LICENSE](https://github.com/ravid7000/chartjs-ng2/blob/master/LICENSE) file for the full text)
|