Angular Charts Component

Charts

Markdown ChatGPT Claude

CoreUI Angular wrapper for Chart.js 4.x, the most popular charting library.

On this page

Installation

If you want to use our Chart.js Angular wrapper you have to install an additional package.

Chart.js v4.x library chart.js
CoreUI Chart.js tooltip plugin and styles @coreui/chartjs
CoreUI Angular Chart.js component @coreui/angular-chartjs

Angular CLI

CoreUI v5.x Chartjs for Angular supports ng add to install all required dependencies for your Angular project.

ng add @coreui/[email protected]

NPM

Your other option is to use npm install directly.

npm install chart.js@4
npm install @coreui/chartjs@4
npm install @coreui/[email protected]

Scss

Import custom CoreUI tooltip styles for Chart.js:

@use '@coreui/chartjs/scss/coreui-chartjs' as *;

Chart types

Line Chart

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. Line Chart properties

import { Component, DestroyRef, inject, signal } from '@angular/core';
import { type ChartData } from 'chart.js';
import { ChartjsComponent } from '@coreui/angular-chartjs';

@Component({
  selector: 'docs-charts-line',
  templateUrl: './charts-line.component.html',
  imports: [ChartjsComponent]
})
export class ChartsLineComponent {
  readonly #destroyRef = inject(DestroyRef);
  #timeoutID: ReturnType<typeof setTimeout> | undefined = undefined;

  constructor() {
    this.#destroyRef.onDestroy(() => {
      clearTimeout(this.#timeoutID);
    });
  }

  readonly data = signal<ChartData>({
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: 'rgba(220, 220, 220, 0.2)',
        borderColor: 'rgba(220, 220, 220, 1)',
        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
        pointBorderColor: '#fff',
        data: [40, 20, 12, 39, 10, 80, 40]
      },
      {
        label: 'My Second dataset',
        backgroundColor: 'rgba(151, 187, 205, 0.2)',
        borderColor: 'rgba(151, 187, 205, 1)',
        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
        pointBorderColor: '#fff',
        data: [50, 12, 28, 29, 7, 25, 60]
      }
    ]
  });

  handleChartRef($chartRef: any) {
    if ($chartRef) {
      console.log('handleChartRef', $chartRef);
      this.#timeoutID = setTimeout(() => {
        this.data.update((data) => {
          data.labels?.push('August');
          data.datasets[0].data.push(60);
          data.datasets[1].data.push(20);
          return data;
        });
        $chartRef?.update();
        this.#timeoutID = undefined;
      }, 5000);
    }
  }
}

<c-chart [data]="data()" type="line" (chartRef)="handleChartRef($event)" />

Bar Chart

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. Bar Chart properties

import { Component } from '@angular/core';
import { type ChartData } from 'chart.js';
import { ChartjsComponent } from '@coreui/angular-chartjs';

@Component({
  selector: 'docs-charts-bar',
  templateUrl: './charts-bar.component.html',
  imports: [ChartjsComponent]
})
export class ChartsBarComponent {
  data: ChartData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'GitHub Commits',
        backgroundColor: '#f87979',
        data: [40, 20, 12, 39, 10, 80, 40]
      }
    ]
  };
}

<c-chart [data]="data" type="bar" />

Radar Chart

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. Radar Chart properties

import { Component } from '@angular/core';
import { type ChartData } from 'chart.js';
import { ChartjsComponent } from '@coreui/angular-chartjs';

@Component({
  selector: 'docs-charts-radar',
  templateUrl: './charts-radar.component.html',
  imports: [ChartjsComponent]
})
export class ChartsRadarComponent {
  data: ChartData = {
    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: 'rgba(220, 220, 220, 0.2)',
        borderColor: 'rgba(220, 220, 220, 1)',
        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
        pointBorderColor: '#fff',
        pointHoverRadius: 15,
        data: [65, 59, 90, 81, 56, 55, 40]
      },
      {
        label: 'My Second dataset',
        backgroundColor: 'rgba(151, 187, 205, 0.2)',
        borderColor: 'rgba(151, 187, 205, 1)',
        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
        pointBorderColor: '#fff',
        pointHoverRadius: 15,
        data: [28, 48, 40, 19, 96, 27, 100]
      }
    ]
  };
}

<c-chart [data]="data" type="radar" />

Doughnut and Pie Charts

Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. Doughnut and Pie Charts properties

import { Component } from '@angular/core';
import { type ChartData } from 'chart.js';
import { ChartjsComponent } from '@coreui/angular-chartjs';

@Component({
  selector: 'docs-charts-doughnut-pie',
  templateUrl: './charts-doughnut-pie.component.html',
  imports: [ChartjsComponent]
})
export class ChartsDoughnutPieComponent {
  data: ChartData = {
    labels: ['VueJs', 'EmberJs', 'ReactJs', 'Angular'],
    datasets: [
      {
        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
        data: [40, 20, 80, 10]
      }
    ]
  };
}

<c-chart [data]="data" type="doughnut" />

Polar Area Chart

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. Polar Area Chart properties

import { Component } from '@angular/core';
import { type ChartData } from 'chart.js';
import { ChartjsComponent } from '@coreui/angular-chartjs';

@Component({
  selector: 'docs-charts-polar-area',
  templateUrl: './charts-polar-area.component.html',
  imports: [ChartjsComponent]
})
export class ChartsPolarAreaComponent {
  data: ChartData = {
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
    datasets: [
      {
        data: [11, 16, 7, 3, 14],
        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
      }
    ]
  };
}

<c-chart [data]="data" type="polarArea" />

Bubble Chart

A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. Bubble Chart properties

import { Component } from '@angular/core';
import { type ChartData } from 'chart.js';
import { ChartjsComponent } from '@coreui/angular-chartjs';

@Component({
  selector: 'docs-charts-bubble',
  templateUrl: './charts-bubble.component.html',
  imports: [ChartjsComponent]
})
export class ChartsBubbleComponent {
  data: ChartData = {
    datasets: [
      {
        label: 'First Dataset',
        data: [
          {
            x: 20,
            y: 30,
            r: 15
          },
          {
            x: 40,
            y: 10,
            r: 10
          }
        ],
        backgroundColor: 'rgb(255, 99, 132)'
      },
      {
        label: 'Second Dataset',
        data: [
          {
            x: 18,
            y: 26,
            r: 27
          },
          {
            x: 23,
            y: 16,
            r: 42
          }
        ],
        backgroundColor: 'rgb(99,138,255)'
      },
      {
        label: 'Third Dataset',
        data: [
          {
            x: 27,
            y: 22,
            r: 9
          },
          {
            x: 26,
            y: 18,
            r: 24
          }
        ],
        backgroundColor: 'rgb(71,208,66)'
      }
    ]
  };
}

<c-chart type="bubble" [data]="data" />

Scatter Chart

Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 points. Scatter Chart properties

import { Component } from '@angular/core';
import { type ChartData } from 'chart.js';
import { ChartjsComponent } from '@coreui/angular-chartjs';

@Component({
  selector: 'docs-charts-scatter',
  templateUrl: './charts-scatter.component.html',
  imports: [ChartjsComponent]
})
export class ChartsScatterComponent {
  data: ChartData = {
    datasets: [
      {
        label: 'Scatter Dataset 1',
        data: [
          {
            x: -10,
            y: 0
          },
          {
            x: 0,
            y: 10
          },
          {
            x: 10,
            y: 5
          },
          {
            x: 0.5,
            y: 5.5
          }
        ],
        borderColor: 'rgb(222,99,156)',
        backgroundColor: 'rgb(231,25,69)'
      },
      {
        label: 'Scatter Dataset 2',
        data: [
          {
            x: -1,
            y: 6
          },
          {
            x: -4,
            y: 7
          },
          {
            x: 9,
            y: 4
          },
          {
            x: 0.7,
            y: 1.7
          }
        ],
        borderColor: 'rgb(133,178,56)',
        backgroundColor: 'rgb(124,213,17)'
      }
    ]
  };
}

<c-chart type="scatter" [data]="data" />

API

import { ChartjsModule } from '@coreui/angular-chartjs';

@NgModule({
  imports: [
    ChartjsModule,
})
export class AppModule(){}

c-chart

component

exportAs: cChart

Inputs:

name	description	type	default
`customTooltips`	Enables custom html based tooltips	`boolean`	true
`data`	The data passed to Chart.js chart	`ChartData`	required
`options`	The options object that is passed into the Chart.js chart	`ChartOptions`	undefined
`plugins`	The plugins array that is passed into the Chart.js chart	`PluginOptionsByType`	undefined
`redraw`	If true, will tear down and redraw chart on all updates	`boolean`	false
`type`	Chart.js chart type.	`keyof ChartTypeRegistry`	bar
`wrapper`	Put the chart into the wrapper with `display: block`.	`boolean`	true
`height`	Height attribute applied to the rendered canvas (px)	`number`	undefined
`width`	Width attribute applied to the rendered canvas (px)	`number`	undefined
`id`	Html id attribute applied to the rendered canvas	`string`	undefined

Outputs:

name	description
`chartRef`	Returns Chart reference when instantiated. Allows direct access to Chart API.
`getDatasetAtEvent`	Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
`getElementAtEvent`	Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
`getElementsAtEvent`	Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.