Angular Bootstrap Charts
Angular charts - Bootstrap 4 & Material Design
Angular Bootstrap charts are graphical representations of data. They are responsive and easy to customize.
At your disposal are 8 types of charts and multiple options for customization.
Add canvas
with mdbChart directive and necessary properties to create new Chart.
Line chart
<div style="display: block">
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.scss'],
})
export class LineChartComponent {
public chartType: string = 'line';
public chartDatasets: Array<any> = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' }
];
public chartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public chartColors: Array<any> = [
{
backgroundColor: 'rgba(105, 0, 132, .2)',
borderColor: 'rgba(200, 99, 132, .7)',
borderWidth: 2,
},
{
backgroundColor: 'rgba(0, 137, 132, .2)',
borderColor: 'rgba(0, 10, 130, .7)',
borderWidth: 2,
}
];
public chartOptions: any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
}
Radar chart
<div style="display: block">
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'radar-chart',
templateUrl: './radar-chart.component.html',
styleUrls: ['./radar-chart.component.scss'],
})
export class RadarChartComponent {
public chartType: string = 'radar';
public chartDatasets: Array<any> = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' }
];
public chartLabels: Array<any> = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
public chartColors: Array<any> = [
{
backgroundColor: 'rgba(105, 0, 132, .2)',
borderColor: 'rgba(200, 99, 132, .7)',
borderWidth: 2,
},
{
backgroundColor: 'rgba(0, 250, 220, .2)',
borderColor: 'rgba(0, 213, 132, .7)',
borderWidth: 2,
}
];
public chartOptions: any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
Bar chart
<div style="display: block">
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.scss'],
})
export class BarChartComponent {
public chartType: string = 'bar';
public chartDatasets: Array<any> = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' }
];
public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
public chartColors: Array<any> = [
{
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2,
}
];
public chartOptions: any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
Horizontal Bar Chart
<div style="display: block">
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'horizontal-bar-chart',
templateUrl: './horizontal-bar-chart.component.html',
styleUrls: ['./horizontal-bar-chart.component.scss'],
})
export class HorizontalBarComponent {
public chartType: string = 'horizontalBar';
public chartDatasets: Array<any> = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' }
];
public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
public chartColors: Array<any> = [
{
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2,
}
];
public chartOptions: any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
Stacked Bar Chart
<div style="display: block">
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'stacked-bar-chart',
templateUrl: './stacked-bar-chart.component.html',
styleUrls: ['./stacked-bar-chart.component.scss'],
})
export class StackedBarComponent {
public chartType: string = 'bar';
public chartDatasets: Array<any> = [
{ data: [65, 59, -157, 81, 56, 55, 40], label: 'My First dataset' },
{ data: [11, 12, -157, 13, 14, 15, 16], label: 'My Second dataset' },
];
public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
public chartColors: Array<any> = [
{
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2,
},
{
backgroundColor: [
'rgba(255, 125, 158, 0.2)',
'rgba(3, 111, 184, 0.2)',
'rgba(255, 255, 137, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(126, 243, 243, 0.2)',
'rgba(255, 210, 115, 0.2)'
],
borderColor: [
'rgba(255, 125, 158, 1)',
'rgba(3, 111, 184, 1)',
'rgba(255, 255, 137, 1)',
'rgba(75, 192, 192, 1)',
'rgba(126, 243, 243, 1)',
'rgba(255, 210, 115, 1)'
],
borderWidth: 2,
},
];
public chartOptions: any = {
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [
{
stacked: true
}
]
}
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
Polar Area Chart
<div style="display: block">
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'polarArea-bar-chart',
templateUrl: './polarArea-bar-chart.component.html',
styleUrls: ['./polarArea-bar-chart.component.scss'],
})
export class PolarAreaChartComponent {
public chartType: string = 'polarArea';
public chartDatasets: Array<any> = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' }
];
public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartColors: Array<any> = [
{
backgroundColor: [
'rgba(219, 0, 0, 0.1)',
'rgba(0, 165, 2, 0.1)',
'rgba(255, 195, 15, 0.2)',
'rgba(55, 59, 66, 0.1)',
'rgba(0, 0, 0, 0.3)'
],
hoverBackgroundColor: [
'rgba(219, 0, 0, 0.2)',
'rgba(0, 165, 2, 0.2)',
'rgba(255, 195, 15, 0.3)',
'rgba(55, 59, 66, 0.1)',
'rgba(0, 0, 0, 0.4)'
],
borderWidth: 2,
}
];
public chartOptions: any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
Pie Chart
<div style="display: block">
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'pie-chart',
templateUrl: './pie-chart.component.html',
styleUrls: ['./pie-chart.component.scss'],
})
export class PieChartComponent {
public chartType: string = 'pie';
public chartDatasets: Array<any> = [
{ data: [300, 50, 100, 40, 120], label: 'My First dataset' }
];
public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartColors: Array<any> = [
{
backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
borderWidth: 2,
}
];
public chartOptions: any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
Doughnut Chart
<div style="display: block">
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'doughnut-bar-chart',
templateUrl: './doughnut-bar-chart.component.html',
styleUrls: ['./doughnut-bar-chart.component.scss'],
})
export class DoughnutChartArea {
public chartType: string = 'doughnut';
public chartDatasets: Array<any> = [
{ data: [300, 50, 100, 40, 120], label: 'My First dataset' }
];
public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartColors: Array<any> = [
{
backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
borderWidth: 2,
}
];
public chartOptions: any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
Updating chart data
<div class="row">
<div class="col-md-6 mx-auto my-5">
<div style="display: block">
<canvas mdbChart [chartType]="chartType" [datasets]="chartDatasets" [labels]="chartLabels" [colors]="chartColors" [options]="chartOptions"
[legend]="true" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto text-center">
<div class="row">
<div class="col-md-4">
<button class="btn btn-primary waves-light" mdbWavesEffect (click)="updateOnlyDatasets()">Update only datasets</button>
</div>
<div class="col-md-4">
<button class="btn btn-primary waves-light" mdbWavesEffect (click)="updateOnlyLabels()">Update only labels</button>
</div>
<div class="col-md-4">
<button class="btn btn-primary waves-light" mdbWavesEffect (click)="updateDatasetsAndLabels()">Update datasets and labels</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="row">
<div class="col-md-6 text-center">
<button class="btn btn-primary waves-light" mdbWavesEffect (click)="updateChartMonthsLabels()">Update months labels</button>
</div>
<div class="col-md-6 text-center">
<button class="btn btn-primary waves-light" mdbWavesEffect (click)="updateChartColors()">Update chart colors</button>
</div>
</div>
</div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'doughnut-bar-chart',
templateUrl: './doughnut-bar-chart.component.html',
styleUrls: ['./doughnut-bar-chart.component.scss'],
})
export class DoughnutChartArea {
public chartType: string = 'line';
public chartDatasets: Array<any> = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' }
];
public chartLabels: Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
public chartColors: Array<any> = [
{
backgroundColor: 'rgba(220,220,220,0.2)',
borderColor: 'rgba(220,220,220,1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(220,220,220,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(220,220,220,1)'
},
{
backgroundColor: 'rgba(151,187,205,0.2)',
borderColor: 'rgba(151,187,205,1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(151,187,205,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
}
];
public chartOptions: any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
updateOnlyDatasets() {
const firstChartData = [
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
];
const secondChartData = [
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
];
// This line will update only data in your Chart
this.chartDatasets = [
{ data: firstChartData },
{ data: secondChartData },
];
}
updateOnlyLabels() {
// This line will update only label in your Chart
// Note that if you need to update only label, you have to put some data into data property
this.chartDatasets = [
{ data: this.chartDatasets[0].data, label: 'Label no. ' + Math.floor(Math.random() * 10), },
{ data: this.chartDatasets[1].data, label: 'Label no. ' + Math.floor(Math.random() * 10), },
];
}
updateDatasetsAndLabels() {
const firstChartData = [
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
];
const secondChartData = [
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
];
// This line will update both data and label in Chart
this.chartDatasets = [
{ data: firstChartData, label: 'Label no. ' + Math.floor(Math.random() * 10), },
{ data: secondChartData, label: 'Label no. ' + Math.floor(Math.random() * 10), },
];
}
updateChartMonthsLabels() {
this.chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
}
updateChartColors() {
this.chartColors = [
{
backgroundColor: 'rgba(159,248,227,0.2)',
borderColor: 'rgba(15,239,187,1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(220,220,220,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(220,220,220,1)'
},
{
backgroundColor: 'rgba(15,239,75,0.2)',
borderColor: 'rgba(9,143,45,1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(220,220,220,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(220,220,220,1)'
},
];
}
Minimalist charts MDB Pro component
Sales
ROI
Conversion
Step 1: Create a basic markup for the chart with a
mdb-simple-chart
,
percent
,
barColor
, and
animate
.
<mdb-simple-chart [percent]="56" [barColor]="'4CAF50'" [animate]="{duration: 1000, enabled: true}"></mdb-simple-chart>
Step 2: (Optional) Create a label.
<mdb-simple-chart [percent]="56" [barColor]="'4CAF50'"></mdb-simple-chart>
<h5><span class="badge green">Sales <i class="fas fa-arrow-circle-up"></i></span></h5>
Step 3: (Optional) Add .text-center
if you want center text.
<div class="text-center">
<mdb-simple-chart [percent]="56" [barColor]="'4CAF50'"></mdb-simple-chart>
<h5><span class="badge green">Sales <i class="fas fa-arrow-circle-up"></i></span></h5>
</div>
For example Easy Pie Charts could looks like this below:
<mdb-simple-chart percent="85" barColor="ef1e25" trackColor="f2f2f2" scaleColor="303030" scaleLength="1" lineCap="round" lineWidth="5"
trackWidth="10" size="110" rotate="0" [animate]="{duration: 1000, enabled: true}"></mdb-simple-chart>
Angular Charts - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of charts component.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
// For MDB Angular Pro
import { ChartsModule, ChartSimpleModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { ChartsModule, WavesModule } from 'angular-bootstrap-md'
Directives
BaseChartDirective
Selector: mdbChart
Type: BaseChartDirective
Charts Inputs
Name | Type | Default | Description | Example |
---|---|---|---|---|
datasets |
any[] | - | Input for filling chart with datasets. | [datasets]="dataset" |
labels |
any[] | - | Input for filling chart with labels. | [labels]="label" |
options |
any | {legend: {display: false}} | Input for filling chart with options. | [options]="{}" |
chartType |
string | - | Input for determine chart type. | [chartType]="'bar'" |
colors |
any[] | - | Input for filling chart with colors. | [colors]="color" |
legend |
boolean | false | Input for determining if chart will have legend or not. | [legend]="false" |
Events
Name | Type | Description | Example |
---|---|---|---|
chartClick |
any | Will be emitted when click event will be activated on the chart. | (chartClick)="onChartClick($event)" |
chartHover |
any | Will be emitted when hober event will be activated on the chart. | (chartHover)="onChartHover($event)" |
Components
SimpleChartComponent
Selector: mdb-simple-chart
Type: SimpleChartComponent
Easy Charts Inputs
Name | Type | Default | Description | Example |
---|---|---|---|---|
customText |
string | ' ' | Input for filling easy-chart with custom text. | customText="Chart" |
percent |
number | null | Input for providing easy-chart percent value. | percent="50" |
barColor |
string | '#ef1e25' | The color of the curcular bar. | barColor="303030" |
trackColor |
string | '#f9f9f9' | The color of the track, or false to disable rendering. | trackColor="f9f9f9" |
scaleColor |
string | 'dfe0e0' | The color of the scale lines, false to disable rendering. | scaleColor="dfe0e0" |
scaleLength |
number | 5 | Length of the scale lines (reduces the radius of the chart). | scaleLength="3" |
lineCap |
string | ' ' | Defines how the ending of the bar line looks like. Possible values are: butt, round and square. | lineCap="round" |
lineWidth |
number | 3 | Width of the chart line in px. | lineWidth="5" |
size |
number | 110 | Size of the pie chart in px. It will always be a square. | size="Chart" |
rotate |
number | 0 | Rotation of the complete chart in degrees. | rotate="Chart" |
animate |
{duration: number, enabled: boolean} | {duration: 1000, enabled: true} | Object with time in milliseconds and boolean for an animation of the bar growing, or false to deactivate animations. This property is REQUIRED to use. | [animate]="{duration: 1000, enabled: true}" |