Beautiful charts for Angular2 based on Chart.js
Follow me at twitter to be notified about new releases.
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 using npm
npm install ng2-charts --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 can be found here: demo and source code.
System.js
System.js bundles can be found in bundles
directory of npm package or at npm cdn
API
Import
import { ChartsModule } from 'ng2-charts/ng2-charts';
// 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)