@coreui/angular-chartjs NPM

Status

install:

npm install chart.js@4
npm install @coreui/chartjs@4
npm install @coreui/angular-chartjs@5

import:

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

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

// standalone components
  import { ChartjsComponent } from '@coreui/angular-chartjs';

@Component({
    standalone: true,
    imports: [
        ChartjsComponent, 
...

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.

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the CoreUI PRO or by becoming a sponsor via Open Collective.