@coreui/angular-chartjs

CoreUI Angular wrapper for Chart.js

Explore @coreui/angular-chartjs docs & examples »

Report bug · Request feature · Blog

Status

install:

npm install chart.js
npm install @coreui/chartjs@3
npm install @coreui/angular-chartjs

import:

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

@NgModule({
  imports: [
      ChartjsModule,
...

usage:

@Component({
  selector: 'app-chart-sample',
  template: `<c-chart type="line" [data]="data" [options]="options" width="300"></c-chart>`,
})
export class ChartSample {

  colors = {
    label: 'My dataset',
    backgroundColor: 'rgba(77,189,116,.2)',
    borderColor: '#4dbd74',
    pointHoverBackgroundColor: '#fff',
  }

  labels = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];

  data = {
    labels: this.labels,
    datasets: [{
      data: [65, 59, 84, 84, 51, 55, 40],
      ...this.colors,
      fill:  {value: 65}
    }],
  }

  options = {
    plugins: {
      legend: {
        display: false
      }
    },
    maintainAspectRatio: false,
    elements: {
      line: {
        tension: 0.4
      },
    }
  };
}

c-chart

component

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
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.

See also:

• Chart.js docs https://www.chartjs.org/docs/