Skip to content
This repository has been archived by the owner on Jan 5, 2023. It is now read-only.

scttcper/ngx-chartjs

Repository files navigation

ngx-chartjs


npm travis codecov

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