https://github.com/synapsium/ngx-chartjs

Angular wrapper library for beautiful charts based on Chartjs
https://github.com/synapsium/ngx-chartjs

angular chartjs wrapper

Last synced: about 2 months ago
JSON representation

Angular wrapper library for beautiful charts based on Chartjs

• Host: GitHub
• URL: https://github.com/synapsium/ngx-chartjs
• Owner: Synapsium
• License: mit
• Created: 2018-11-11T14:49:34.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T02:34:57.000Z (about 2 years ago)
• Last Synced: 2024-04-26T08:41:57.508Z (9 months ago)
• Topics: angular, chartjs, wrapper
• Language: TypeScript
• Size: 433 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  

    
ngx-chartjs


  





Quickly way to integrate Chart.js components with Angular



# 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 Chart.js 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 API Doc for the available options.

## How to use

In your target component integrate chartjs element :

```html

```

### 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`                         | `'{}'`             | Data of chart                                                                                                              |

| options   | `ChartOptions`                         | `{ responsive: true, maintainAspectRatio: false}`              | Options of chart                                                                                            |

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