ng-chartjs

A fully functional Angular2+ chart.js library.This chart library based on ng2-charts.

Thanks to valor-software's ng2-charts.

ng-chartjs already supports Chart.js 3.0, but the Chart.js 3.0 API is destructive, please use it with caution.

Usage & Demo

Demo

Installation

1.You can install ng-chartjs using npm

npm install ng-chartjs --save

2.You need to install Chart.js library in application.

npm install chart.js --save

Usage

API

Import

1.Normal import.

import { NgChartjsModule } from 'ng-chartjs';

// In your App's module:
imports: [
   NgChartjsModule
]

2.Importing global plugin.

import { NgChartjsModule } from 'ng-chartjs';

// In your App's module:
imports: [
   NgChartjsModule.registerPlugin([...])
]

3.Lazy Module

import { NgChartjsModule } from 'ng-chartjs';

// In your lazy module:
imports: [
   NgChartjsModule.registerPlugin([...])
]

Chart types

• line
• bar
• radar
• pie
• polarArea
• ...

Plugins

inline plugin

Use the plugins Properties.

eg. source code

html file.

<canvas ngChartjs 
  [datasets]="lineChartData" 
  [labels]="lineChartLabels"
  [options]="lineChartOptions"
  [legend]="lineChartLegend"
  [chartType]="lineChartType"
  [inlinePlugins]="inlinePlugin">
</canvas>

ts file.

...
import * as Chart from 'chart.js';';

  lineChartData: Chart.ChartDataset[] = [
    {
      label: 'My First dataset',
      fill: false,
      tension: 0.1,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40],
    },
  ];
  lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  lineChartOptions: any = {
    responsive: true
  };
  lineChartLegend = true;
  lineChartType = 'line';
  inlinePlugin: any;
  textPlugin: any;

  ngOnInit() {
    // inline plugin
    this.textPlugin = [{
      id: 'textPlugin',
      beforeDraw(chart: any): any {
        const width = chart.width;
        const height = chart.height;
        const ctx = chart.ctx;
        ctx.restore();
        const fontSize = (height / 114).toFixed(2);
        ctx.font = `${fontSize}em sans-serif`;
        ctx.textBaseline = 'middle';
        const text = 'Text Plugin';
        const textX = Math.round((width - ctx.measureText(text).width) / 2);
        const textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
      }
    }];

    this.inlinePlugin = this.textPlugin;
  }
  ...

View

The plugins properties is an array of objects that allows multiple inline plugins to be used simultaneously.

global plugin

Using the registration API in app.module.ts.

eg. source code

Customize global plugin.

export function horizonalLine(chartInstance: any) {
  const yScale = chartInstance.scales['y'];
  const canvas = chartInstance.canvas;
  const ctx = chartInstance.ctx;
  let index;
  let line;
  let style;
  let yValue;

  if (chartInstance.options.horizontalLine) {
    for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
      line = chartInstance.options.horizontalLine[index];

      if (!line.style) {
        style = 'rgba(169,169,169, .6)';
      } else {
        style = line.style;
      }

      if (line.y) {
        yValue = yScale.getPixelForValue(line.y);
      } else {
        yValue = 0;
      }

      ctx.lineWidth = 3;

      if (yValue) {
        ctx.beginPath();
        ctx.moveTo(0, yValue);
        ctx.lineTo(canvas.width, yValue);
        ctx.strokeStyle = style;
        ctx.stroke();
      }

      if (line.text) {
        ctx.fillStyle = style;
        ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
      }
    }
    return;
  }
}

const horizonalLinePlugin = {
  id: 'cutomline',
  beforeDraw: horizonalLine
};

Register global plugin

import { NgChartjsModule } from 'ng-chartjs';

// In your App's module:
imports: [
   NgChartjsModule.registerPlugin([horizonalLinePlugin])
]

html file.

<canvas ngChartjs 
  [datasets]="lineChartData" 
  [labels]="lineChartLabels"
  [options]="lineChartOptions" 
  [legend]="lineChartLegend" 
  [chartType]="lineChartType">
</canvas>

ts file.

lineChartData: Chart.ChartDataset[] = [
    {
      label: 'My First dataset',
      fill: false,
      tension: 0.1,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40],
    },
  ];
  lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  lineChartOptions: any = {
    responsive: true,
    horizontalLine: [{  // use custom global plugin
      y: 82,
      style: 'rgba(255, 0, 0, .4)',
      text: 'max'
    }, {
      y: 60,
      style: '#00ffff',
    }, {
      y: 44,
      text: 'min'
    }]
  };
  lineChartLegend = true;
  lineChartType = 'line';

View

Import third-party plugin libraries.

eg. source code

import annotationPlugin from 'chartjs-plugin-annotation';
...

// In your App's module:
imports: [
   NgChartjsModule.registerPlugin([annotationPlugin])
]

Using the plugin directly within the options property.

options = {
    responsive: true,
    annotation: {  // use global plugin.
    annotations: {
        line1: {
          type: 'line',
          value: 70,
          scaleID: 'y',
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 2,
          label: {
            backgroundColor: 'red',
            content: 'Target line',
            enabled: true,
            position: 'center',
            font: {
              weight: 'bold'
            }
          }
        },
        box1: {
          type: 'box',
          xMin: 1,
          xMax: 2,
          yMin: 50,
          yMax: 70,
          backgroundColor: 'rgba(255, 99, 132, 0.25)'
        }
      }
    }
};

View

The parameter of registerPlugin function is an array of objects.

Get chart.js instance

Set the id attribute of the element,then Get the chart.js object by id. see source code

html file

    <div style="position: relative; width: 600px;">
      <canvas id="testChart" ngChartjs 
        [datasets]="lineChartData" 
        [labels]="lineChartLabels"
        [options]="lineChartOptions" 
        [legend]="lineChartLegend" 
        [chartType]="lineChartType" 
        [resetOption]="resetOption">
      </canvas>
    </div>

ts file

...
import { NgChartjsService } from 'ng-chartjs';
...
ngInit() {
    const chart: any = this.ngChartjsService.getChart('testChart');
    chart.update();
}
...

Get NgChartjs Directive instance

html

<canvas #ngChartjs="ngChartjs"></canvas>

ts

@ViewChild('ngChartjs', {static: true})
private readonly ngChartjs: NgChartjsDirective;

Get random color

import { getColors } from 'ng-chartjs';

generateColor, generateColors...

Properties

Method

• chart -- Get chartjs instance
• update -- Update chartjs
• addData -- Dynamically add data to chart Parameter: labels and data
• remove -- Dynamically remove data to chart Parameter: oldest or latest

Events

• chartClick : fires when click on a chart has occurred, returns information regarding active points and labels
• chartHover : fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels

License

The MIT License (see the LICENSE file for the full text)