# ng2-chartjs2

> Chart.js 2.0 definitions for Angular 2

Latest version **1.2.0** (published 2016-10-14) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ng2-chartjs2
pnpm add ng2-chartjs2
yarn add ng2-chartjs2
bun add ng2-chartjs2
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2016-10-14 |
| First published | 2016-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Zyra Media Inc |
| Maintainers | ihadeed |
| Keywords | angular2, chart.js, charts, ng2, angularjs |

## Links

- npm: https://www.npmjs.com/package/ng2-chartjs2
- Repository: https://github.com/zyramedia/ng2-chartjs2
- Homepage: https://github.com/zyramedia/ng2-chartjs2#readme
- Issues: https://github.com/zyramedia/ng2-chartjs2/issues
- npm.io page: https://npm.io/package/ng2-chartjs2

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2016-10-14
- 1.1.2 — 2016-10-08
- 1.1.1 — 2016-10-07
- 1.1.0 — 2016-10-05
- 1.0.0 — 2016-10-05
- 0.2.2 — 2016-07-30
- 0.2.1 — 2016-07-30
- 0.1.1 — 2016-07-26
- 0.1.0 — 2016-07-23
- 0.0.5 — 2016-07-22
- 0.0.4 — 2016-07-22
- 0.0.3 — 2016-07-22
- 0.0.2 — 2016-07-22
- 0.0.1 — 2016-06-01

## README

[![npm](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/ng2-chartjs2)

[![NPM](https://nodei.co/npm/ng2-chartjs2.png?stars&downloads)](https://nodei.co/npm/ng2-chartjs2/)

# Chart.js 2.0 Component for Angular 2
This is an Angular 2 component to display charts. This component uses Chart.js 2.0. It works well with responsive sites, so it should work properly with all Angular2 apps, as well as Ionic 2 apps.
 
## Installation
You must manually include Chart.js library into your build or index.html

Then install ng2-chartjs2 via NPM
```
npm i --save-dev ng2-chartjs2
```

Then import ChartModule into your main App Module:
```
@MyAppModule({
...
  imports: [
   ...
   ChartModule
  ]
...
})
```


## Example Usage

You can either pass `options` attribute with your own custom options (see [Chart.js Docs](http://www.chartjs.org/docs/)) or pass individual options like `labels`, `data`, and `type`.

```typescript
import { Chart } from 'ng2-chartjs2';

@Component({
  selector: 'my-app',
  template: '<chart [labels]="labels" [data]="data" type="bar"></chart>'
})
export class AppComponent {
  labels: string[] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
  data: Chart.Dataset[] = [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }
  ];
}
```

## Reference
This repo will only document things related to the Angular 2 Component. To understand how Chart.js works you need to visit [their docs](http://www.chartjs.org/docs/)

| Chart.js Doc Section  | Represented by interface |
|---|---|
| [Options](http://www.chartjs.org/docs/#chart-configuration-creating-a-chart-with-options) / [Common Chart Configuration](http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration) |Chart.Options |
| [Title Configuration](http://www.chartjs.org/docs/#chart-configuration-title-configuration) |Chart.TitleConfiguration|
| [Legend Configuration](http://www.chartjs.org/docs/#chart-configuration-legend-configuration) |Chart.LegendConfiguration|
| [Legend Item Interface](http://www.chartjs.org/docs/#chart-configuration-legend-configuration) |Chart.LegendItem|
| [Tooltip Configuration](http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration) |Chart.TooltipConfiguration|
| Tooltip Callbacks | Chart.TooltipCallbacks |
| Tooltip Item Interface | Chart.TooltipItem |
| [Hover Configuration](http://www.chartjs.org/docs/#chart-configuration-hover-configuration) | Chart.HoverConfiguration |
| [Animation Configuration](http://www.chartjs.org/docs/#chart-configuration-animation-configuration) | Chart.AnimationConfiguration |
| Animation Interface | Chart.Animation |
| Element Configuration | |
| [Data Point](http://www.chartjs.org/docs/#line-chart-data-points) (for any type) | Chart.Dataset |
| | |
| | |

---
_Source: https://npm.io/package/ng2-chartjs2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._