Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

ng2-charts-extended

0.0.3 • Public • Published

ng2-charts-extended

Beautiful charts for Angular2 based on Chart.js

Usage & Demo

Installation

  1. You can install ng2-charts-extended using npm
npm install ng2-charts-extended --save
  1. 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)
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 be Array<number[]> only for line, bar and radar, otherwise number[];
  • datasets (Array<{data: Array<number[]> | number[], label: string}>) - data see about, the label for the dataset which appears in the legend and tooltips
  • 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
  • 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 labels
  • chartHover: 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

install

npm i ng2-charts-extended

Downloadsweekly downloads

2

version

0.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability