scttcper / ngx-chartjs

Functional Chart.js wrapper for Angular

ngx-chartjs

Functional Chart.js wrapper for Angular

Based on react-chartjs-2

Demo: https://ngx-chartjs.vercel.app

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';

register chartjs at root of app or module. Must run before this component mounts

import {
  BarController,
  BarElement,
  Chart,
  CategoryScale,
  LinearScale,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
// What you register will depend on what chart you are using and features used.
Chart.register(BarController, BarElement, CategoryScale, LinearScale, 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

License

MIT

---

GitHub @scttcper  ·  Twitter @scttcper