Functional Chart.js wrapper for Angular
Based on react-chartjs-2
Demo: https://typectrl.github.io/ngx-chartjs/
requires the js package chart.js
npm install @ctrl/ngx-chartjs chart.jsImport and Add to module
import { ChartjsModule } from '@ctrl/ngx-chartjs';setup data and other settings
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)',
],
borderWidth: 1,
},
],
};Add ngx-chartjs directive to element
<ngx-chartjs [data]="data" type="bar"></ngx-chartjs>| name | type | default | description |
|---|---|---|---|
| type | string |
'doughnut' |
chart.js type 'bar', 'line', etc. |
| data | ChartData |
{} |
chart.js data object, see docs |
| plugins | any[] |
[] |
chart.js plugin array, see docs |
| redraw | boolean |
false |
force redraw on any input change, like to change legend |
| options | any |
{} |
chart.js options |
| legend | any |
{display: true, position: 'bottom'} |
chart.js legend see docs |
| width | number |
300 |
canvas width |
| height | number |
150 |
canvas height |
data: do not modify data as change detection will not fire, only replace with new object
legend: can also be overwritten via options
Chart.js events are available via options or legend object, otherwise a canvas click event is exposed for use
| name | type | description |
|---|---|---|
| chartClick | ChartClickEvent |
returns the click $event along with element, elements and dataset see docs |
MIT