Skip to content
Functional Chart.js wrapper for Angular
TypeScript HTML JavaScript CSS
Branch: master
Clone or download

README.md

ngx-chartjs


npm travis codecov

Functional Chart.js wrapper for Angular

Based on react-chartjs-2

Demo: https://ngx-chartjs.netlify.com/

Install

requires the js package chart.js

npm install @ctrl/ngx-chartjs chart.js

Dependencies

Latest version available for each version of Angular

@ctrl/ngx-chartjs Angular
1.1.2 6.x 7.x
2.0.0 8.x

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

You can’t perform that action at this time.