# @synapsium/ngx-chartjs

> Angular wrapper library for beautiful charts based on Chartjs

Latest version **1.0.6** (published 2019-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @synapsium/ngx-chartjs
pnpm add @synapsium/ngx-chartjs
yarn add @synapsium/ngx-chartjs
bun add @synapsium/ngx-chartjs
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2019-01-03 |
| First published | 2018-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 199.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | https://github.com/synapsium/ngx-chartjs/graphs/contributors |
| Maintainers | nicolaslawdune |
| Keywords | angular, chart.js, wrapper |

## Links

- npm: https://www.npmjs.com/package/@synapsium/ngx-chartjs
- Repository: https://github.com/Synapsium/ngx-chartjs
- Homepage: https://github.com/Synapsium/ngx-chartjs#readme
- Issues: https://github.com/synapsium/ngx-chartjs/issues
- npm.io page: https://npm.io/package/@synapsium/ngx-chartjs

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## 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.0.6 (latest) — 2019-01-03
- 1.0.5 — 2018-11-21
- 1.0.4 — 2018-11-21
- 1.0.3 — 2018-11-21
- 1.0.2 — 2018-11-21
- 1.0.1 — 2018-11-21
- 1.0.0 — 2018-11-12

## README

<p align="center">
  <img height="200px" width="200px"  src="https://www.chartjs.org/img/chartjs-logo.svg">
  <a href="http://synapsium.com">
    <h1 align="center">ngx-chartjs</h1>
  </a>
</p>

<p align="center">
Quickly way to integrate <a href="https://www.chartjs.org">Chart.js</a> components with <a href="https://angular.io/">Angular</a>
</p>

# chart.js

One of the most popular and powerful open source library to create a  data visualization. To use this library you should get familiar with the <a href="https://www.chartjs.org">Chart.js</a> documentation.

## Setup

### Installation

Install `chart.js` and `ngx-chartjs` library from `npm`

```bash
npm install chart.js @synapsium/ngx-chartjs --save
```

Install `@types/chart.js` library from `npm`

```bash
npm install @types/chart.js --save-dev
```

### Module usage

Add `ChartjsModule` to module

```javascript
import { ChartjsModule, ChartjsConfig, CHARTJS_CONFIG } from '@synapsium/ngx-chartjs';

const DEFAULT_CHARTJS_CONFIG: ChartjsConfig = {
    options {
        responsive: true,
        maintainAspectRatio: false
    }
};

@NgModule({
  ...
  imports: [
    ...
    ChartjsModule
  ],
  providers: [
    {
      provide: CHARTJS_CONFIG,
      useValue: DEFAULT_CHARTJS_CONFIG
    }
  ]
})
```

Check out the <a href="https://www.chartjs.org/docs/latest/">API Doc</a> for the available options.


## How to use

In your target component integrate chartjs element :
```html
<chartjs [className]="chart" 
         [type]="type" 
         [data]="data" 
         [options]="options">
</chartjs>
```
### Inputs

| Input             | Type                           | Default           | Description                                                       |
| ----------------- | ------------------------------ | ----------------- | -----------------------------------------------------------------------------------------------------------------------------------------    |
| className         | `string`                       |                   | Custom css class name applied on parent container of chart canvas |
| type              | `string`                       | `'doughnut'`      | Type of chart : `'doughnut'`, `'line'`, `'bar'`, `'radar'`, `'pie'`, `'polarArea'`, `'bubble'`, `'scatter'` |
| data           | `ChartData`                         | `'{}'`             | <a href="https://www.chartjs.org/docs/latest/getting-started/usage.html">Data of chart</a>                                                                                                              |
| options   | `ChartOptions`                         | `{ responsive: true, maintainAspectRatio: false}`              | <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/chart.js/index.d.ts">Options of chart</a>                                                                                            |

> `Options` properties of global config will be replaced by local `Options`.

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