Ng2-charts-x NPM

ng2-charts-x

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.

Usage & Demo

Currently only the original demo that is using ng2-charts is available.

Sample in below website uses ng2-charts@1.1.0

http://valor-software.github.io/ng2-charts/ http://plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview

Installation (using angular-cli)

Install ng2-charts-x using npm

npm install ng2-charts-x --save

This also installs chart.js and moment.

Add to your app.module.ts

import { ChartsModule } from 'ng2-charts-x';

// In your App's module:
imports: [
   ChartsModule
]

Enjoy

API

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.