@ctrl/ngx-chartjs NPM

Functional Chart.js wrapper for Angular

Install

requires peer dependency 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
3.0.1	9.x
4.0.2	10.x
6.0.1	11.x
current	>=12.x

Use

Import and Add to module

import { ChartjsModule } from '@ctrl/ngx-chartjs';

// What you register will depend on what chart you are using and features used.
import { BarController, BarElement, Chart, Title, Tooltip, Legend } from 'chart.js';
Chart.register(BarController, BarElement, Title, Tooltip, Legend);

setup data and other settings

import type { ChartData, ChartOptions } from 'chart.js';
const data: ChartData = {
  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,
    },
  ],
};
const options: ChartOptions = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Chart.js Doughnut Chart',
    },
  },
};

Add ngx-chartjs directive to element

<ngx-chartjs type="bar" [data]="data" [options]="options"></ngx-chartjs>

Inputs

name	type	default	description
type	`string`	`'doughnut'`	chart.js type 'bar', 'line', etc.
data	`ChartData`	`{}`	chart.js data object, see docs
options	`any`	`{}`	chart.js options
redraw	`boolean`	`false`	force redraw on any input change, like to change legend
updateMode	`string`	`undefined`	parameter passed to chart.update()
width	`number`	`300`	canvas width
height	`number`	`150`	canvas height