@reibo/ngx-chartjs

ngx-chartjs

Beautiful charts for Angular 2,4,5,6 based on Chart.js

Usage

Installation

1. Install using npm

npm install @reibo/ngx-chartjs --save

or yarn

yarn add @reibo/ngx-chartjs

2. Install chart.js and chart.js typings

npm install chart.js --save
npm install @types/chart.js -D

or yarn

yarn add chart.js 
yarn add @types/chart.js -D

###Demo Demo code can be found /projects/demo/src

###Api ####Import

import { ChartsModule } from '@reibo/ngx-chartjs';

@NgModule({
  imports: [
    ChartsModule,
    ...
  ],
  ...
})
export class MyModule {}

####Usage in your html

<ngx-charts
      [datasets]="data"
      [labels]="labels"
      [options]="options"
      [legend]="legend"
      [colors]="chartColors"
      [chartType]="chartType"></ngx-charts>

One component can be used for all chart types of chart.js

• datasets (Array<{data: Array<number[]> | number[], label: string}>) - set of points of the chart
• 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

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.