JSPM – @coreui/angular-chartjs@2.0.0-alpha.1

Package Exports

@coreui/angular-chartjs
@coreui/angular-chartjs/bundles/coreui-angular-chartjs.umd.js
@coreui/angular-chartjs/fesm2015/coreui-angular-chartjs.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@coreui/angular-chartjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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	`Plugin[]`	undefined
`redraw`	If true, will tear down and redraw chart on all updates	`boolean`	false
`type`	Chart.js chart type.	`ChartType`	bar
`wrapper`	Put the chart into the wrapper with `display: block`.	`ChartType`	bar
`height`	Height attribute applied to the rendered canvas (px)	`number`	150
`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.

@coreui/angular-chartjs