Mf-ng2-chart NPM

mf-ng2-chart

Installation

To install this library, run:

$ npm install mf-ng2-chart --save

Note

Follow the quickstart provided that you have at least one <svg> defined in your Angular Component's .html

<div>
  <svg id="chart"></svg>
</div>

BarChart

Bar Chart

On your Angular AppModule, import MfBarChartService Angular Service and define the service in your module providers.

import { MfBarChartService } from 'mf-ng2-chart';

providers: [MfBarChartService]

On your Angular AppComponent, import MfBarChartService, MfBarChartComparator, and MfBarChartData.

import { MfBarChartService, MfBarChartComparator, MfBarChartData } from 'mf-ng2-chart';

constructor (private mfBarChartService: MfBarChartService) {}

MfBarChartComparator takes 2 parameters.

MfBarChartComparator(<label: string>, <value: number>)

label - Comparator label as displayed in chart value - Value where the data is being compared

MfBarChartData on the otherhand, takes 3 parameters.

MfBarChartComparator(<label: string>, <value: number>, <description: string>)

label - Data label as displayed in chart value - Value of data description - Short description of the data (Currently not being used. Leave '' for now)

Lastly, MfBarChartService.createBarChart() takes 3 required parameters and 1 optional options.

MfBarChartService.createBarChart(<your_svg: string>,
  <comparators: Array<MfBarChartComparator>>,
  <data: Array<MfBarChartData>>,
  <options?: any>)

Sample Options

options = {
  chartHeight: 200, // Defaults to 200
  chartWidth: 300, // Defaults to 300
  barWidth: 20, // In pixels. Defaults to 20
  comparatorStrokeWidth: 1, // In pixels. Defaults to 1. 0 for none
  borderStrokeWidth: 2 // In pixels. Defaults to 2. 0 for none
  comparatorFontSize: 5 // In pixels. Defaults to 12,
  dataFontSize: 5 // In pixels. Defaults to 12
}

Usage

export class AppComponent implements OnInit {

  // Define the Comparators
  public comparators: Array<MfBarChartComparator> = [
    new MfBarChartComparator('0', 0),
    new MfBarChartComparator('5', 5),
    new MfBarChartComparator('10', 10),
    new MfBarChartComparator('15', 15),
    new MfBarChartComparator('', 20)
  ];

  // Define the Data
  public data: Array<MfBarChartData> = [
    new MfBarChartData('A', 9, ''),
    new MfBarChartData('B', 10, ''),
    new MfBarChartData('C', 7, ''),
    new MfBarChartData('D', 15, '')
  ];

  constructor (
    private mfBarChartService: MfBarChartService
  ) {}

  ngOnInit() {
    this.mfBarChartService.createBarChart('svg#chart', this.comparators, this.datum, {
      barWidth: 30,
      chartHeight: 400
    });
  }

}