ChartBuilder

This library was generated with Angular CLI version 9.0.7.

What is this?

Chart builder is an angular chart library.

Chart

• Progress Bar
• Pie Chart

Getting started

First, install the latest stable version. There are two basic chart types, Progress Bar and Pie Chart.

Accept Properties for Progress Bar :

• data - is a number type, indicate the percentage out of 100. Required property.
• labels - is a string type. Example: "Completed"
• width - is a string type. Width of the progress bar. Example: "500px" or "80%"
• height - is a string type. Height of the progress bar. Example: "50px" or "40%"
• chartType - is a string type. Example: "progress"

Default Features

The default width of Progress bar is 300px and default height is 30px.

Accept Properties for Pie Chart :

• data - is an array type. Required property.
• labels - is a string type. Example: "Completed"
• width - is a number type. Width of the Pie canvas. Example: 400
• height - is a string type. Height of the Pie canvas. Example: 400
• chartType - is a string type. Example: "pie"

Default Features

The default width of Pie canvas is 400 and default height is 400.

Installation

For the latest stable version:

npm i angular-chart-builder

Then...

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ChartBuilderModule } from 'angular-chart-builder';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartBuilderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

then...

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Parameswar';
  public chartLabels = 'Completed';
  public chartData = 80;
  public chartType = 'progress';
  public chartWidth = '400px';
  public chartHeight = '40px';
}

then...

app.component.html

<pm-chart-builder
      [data]="chartData"
      [labels]="chartLabels"
      [width]="chartWidth"
      [height]="chartHeight"
      [chartType]="chartType">
    </pm-chart-builder>

Pie Chart integration

app.module.ts keep as it is.

then...

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public pieLabels = 'Working hour in July';     // string type
  public pieData = [
    { name: 'param', value: 176 },
    { name: 'debo', value: 180 },
    { name: 'rahul', value: 150 },
    { name: 'biswa', value: 140 },
    { name: 'dipan', value: 160 }
  ];
  public pieType = 'pie';   // string type
  public pieWidth = 300;   // number type
  public pieHeight = 300;  // number type
}

then...

app.component.html

<pm-pie-chart
  [data]="pieData"
  [labels]="pieLabels"
  [width]="pieWidth"
  [height]="pieHeight"
  [chartType]="pieType">
</pm-pie-chart>

Technical Support

• param23.03@gmail.com

Licensing

Free