Angular Bootstrap charts
Simple, clean and interactive charts
Line chart
import { Component } from '@angular/core';
@Component({
selector: 'chart-component-example',
templateUrl: 'chart.component.html',
})
export class ChartComponentExample {
public chartType:string = 'line';
public chartDatasets:Array = [
{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 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
public chartColors:Array = [
{
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 { }
}
Radar Chart
import { Component } from '@angular/core';
@Component({
selector: 'chart-component-example',
templateUrl: 'chart.component.html',
})
export class ChartComponentExample {
public chartType:string = 'radar';
public chartDatasets:Array = [
{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 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
public chartColors:Array = [
{
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 { }
}
Bar Chart
import { Component } from '@angular/core';
@Component({
selector: 'chart-component-example',
templateUrl: 'chart.component.html',
})
export class ChartComponentExample {
public chartType:string = 'bar';
public chartDatasets:Array = [
{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 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
public chartColors:Array = [
{
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 { }
}
Polar Area Chart
import { Component } from '@angular/core';
@Component({
selector: 'chart-component-example',
templateUrl: 'chart.component.html',
})
export class ChartComponentExample {
public chartType:string = 'polarArea';
public chartData:Array = [300, 50, 100, 40, 120];
public chartLabels:Array = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartColors:Array = [{
hoverBorderColor: ['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)'],
hoverBorderWidth: 0,
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5","#616774"]
}];
public chartOptions:any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
}
Pie Chart
import { Component } from '@angular/core';
@Component({
selector: 'chart-component-example',
templateUrl: 'chart.component.html',
})
export class ChartComponentExample {
public chartType:string = 'pie';
public chartData:Array = [300, 50, 100, 40, 120];
public chartLabels:Array = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartColors:Array = [{
hoverBorderColor: ['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)'],
hoverBorderWidth: 0,
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5","#616774"]
}];
public chartOptions:any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
}
Doughnut Chart
import { Component } from '@angular/core';
@Component({
selector: 'chart-component-example',
templateUrl: 'chart.component.html',
})
export class ChartComponentExample {
public chartType:string = 'doughnut';
public chartData:Array = [300, 50, 100, 40, 120];
public chartLabels:Array = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartColors:Array = [{
hoverBorderColor: ['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)'],
hoverBorderWidth: 0,
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5","#616774"]
}];
public chartOptions:any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
}
Updating Chart data
The following methods describe how you can dynamically change the appearance of your charts.
import { Component } from '@angular/core';
@Component({
selector: 'update-chart',
templateUrl: './update-chart.component.html',
styleUrls: ['./update-chart.component.scss'],
})
export class UpdateChartComponent {
public chartType: string = 'line';
public chartDatasets: Array = [
{ 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 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
public chartColors: Array = [
{
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.
<mdb-simple-chart [percent]="56" [barColor]="'4CAF50'"></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="fa fa-arrow-circle-up"></i></span></h5>
Step 3: Use
.text-center class to center the content.
<div class="text-center">
<mdb-simple-chart [percent]="56" [barColor]="'4CAF50'"></mdb-simple-chart>
<h5><span class="badge green">Sales <i class="fa fa-arrow-circle-up"></i></span></h5>
</div>
Configuration options:
You can change the apperance of your's chart by using attributes below:
| Property | Description |
|---|---|
| barColor | The color of the curcular bar. |
| trackColor | The color of the track, or false to disable rendering. |
| scaleColor | The color of the scale lines, false to disable rendering. |
| scaleLength | Length of the scale lines (reduces the radius of the chart). |
| lineCap | Defines how the ending of the bar line looks like. Possible values are: butt, round and square. |
| lineWidth | Width of the chart line in px. |
| size | Size of the pie chart in px. It will always be a square. |
| rotate | Rotation of the complete chart in degrees. |
| animate | Object with time in milliseconds and boolean for an animation of the bar growing ({ duration: 1000, enabled: true }), or false to deactivate animations. Note, that animate is required for proper working charts component. It's obligatory to add it. |
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>
API Reference:
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.
API Reference for MDB Angular Charts:
// For MDB Angular Pro
import { ChartsModule } from 'ng-uikit-pro-standard'// For Minimalistic Charts
import { ChartSimpleModule } from 'ng-uikit-pro-standard'// For MDB Angular Free
import { ChartsModule } from 'angular-bootstrap-md'