@apollo-rocket/ng2-charts-apollo
v1.8.1
Published
Reactive, responsive, beautiful charts for Angular2 based on Chart.js
Downloads
5
Readme
ng2-charts
Beautiful charts for Angular2 based on Chart.js
This is a fork of ng2-charts from valor-software that fixes some bugs which were not addressed in the original for a long time and this package will be used for Apollo-rocket.
Usage & Demo
Sample in below website uses [email protected]
http://valor-software.github.io/ng2-charts/ http://plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview
Installation
- You can install ng2-charts-apollo using npm
npm install ng2-charts-apollo --save
- You need to install and include
Chart.js
library in application viahtml
orwebpack bundler
(more options can be found in officialchart.js
documentation)
npm install chart.js --save
Important: Embedding Chart.js
in application is mandatory!
<script src="node_modules/chart.js/src/chart.js"></script>
Usage & Demo
Demo and API details of ng2-charts-apollo can be found here: demo and source code.
API
Import
import { ChartsModule } from 'ng2-charts-apollo/ng2-charts-apollo';
// In your App's module:
imports: [
ChartsModule
]
Chart types
There are one directive for all chart types: base-chart
, and there are 6 types of charts: , line
, bar
, radar
, pie
, polarArea
, doughnut
.
Properties
Note: For more information about possible options please refer to original chart.js documentation
data
(Array<number[]> | number[]
) - set of points of the chart, it should beArray<number[]>
only forline
,bar
andradar
, otherwisenumber[]
;datasets
(Array<{data: Array<number[]> | number[], label: string}>
) -data
see about, thelabel
for the dataset which appears in the legend and tooltipslabels
(?Array<any>
) - x axis labels. It's necessary for charts:line
,bar
andradar
. And just labels (on hover) for charts:polarArea
,pie
anddoughnut
chartType
(?string
) - indicates the type of charts, it can be:line
,bar
,radar
,pie
,polarArea
,doughnut
options
(?any
) - chart options (as from Chart.js documentation)colors
(?Array<any>
) - data colors, will use default and|or random colors if not specified (see below)legend
: (?boolean=false
) - if true show legend below the chart, otherwise not be shown
Events
chartClick
: fires when click on a chart has occurred, returns information regarding active points and labelschartHover
: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels
Colors
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.
Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
- Use GitHub Issues board to report bugs and feature requests (not our email address)
- 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.
Thanks for understanding!
License
The MIT License (see the LICENSE file for the full text)