ng2-charts-extended
v0.0.3
Published
Reactive, responsive, beautiful charts for Angular2 based on Chart.js
Downloads
6
Maintainers
Readme
ng2-charts-extended
Beautiful charts for Angular2 based on Chart.js
Usage & Demo
Installation
- You can install ng2-charts-extended using npm
npm install ng2-charts-extended --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>
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-extended/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.
License
The MIT License