@ctrl/ngx-chartjs

ngx-chartjs

Functional Chart.js wrapper for Angular

Based on react-chartjs-2

Demo: https://typectrl.github.io/ngx-chartjs/

Install

requires the js package chart.js

npm install @ctrl/ngx-chartjs chart.js

Use

Import 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>

[Inputs]

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

Tips

data: do not modify data as change detection will not fire, only replace with new object
legend: can also be overwritten via options

(Ouput)

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

License

MIT

GitHub @scttcper  ·  Twitter @scttcper