Charts advanced usage
Bootstrap 5 Charts advanced usage
This documentation provides examples of advanced chart usage.
Note: Read the API tab in the basic chart docs to find all available options and advanced customization
In order to use chart directive in your application, install chart.js (v3) library and import it in angular.json file. Read the
API tab in the basic chart docs
to find more information about required imports.
Options
In most cases, working with advanced charts is related to the handling of options.
MDB provides default options for each chart - you can easily change that by passing an object with your custom options to the Chart constructor.
<canvas
mdbChart
[type]="'bar'"
[datasets]="datasets"
[labels]="labels"
[options]="options"
></canvas>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
datasets = [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 6],
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: 1,
},
];
labels = ['January', 'February', 'March', 'April', 'May', 'June'];
options = {
scales: {
x: {
ticks: {
color: '#4285F4',
},
},
y: {
ticks: {
color: '#f44242',
},
},
},
};
}
Mixed
With MDB it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.
<canvas
mdbChart
[type]="'bar'"
[datasets]="datasets"
[labels]="labels"
></canvas>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
datasets = [
// First dataset (bar)
{
label: 'Impressions',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
order: 2,
},
// Second dataset (line)
{
label: 'Impressions (absolute top) %',
data: [211, 2543, 2745, 3123, 2765, 1485, 587],
type: 'line',
order: 1,
backgroundColor: 'rgba(66, 133, 244, 0.0)',
borderColor: '#94DFD7',
borderWidth: 2,
pointBorderColor: '#94DFD7',
pointBackgroundColor: '#94DFD7',
lineTension: 0.0,
},
];
labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
}
Data labels
In order to use datalabels plugins, you need to install chartjs-plugin-datalabels package. The [plugins] input used in the example below was added in version 4.0.0. In previous versions the ChartDatalabels plugin was registered by default.
Use datalabels plugin to display values directly on a graph.
<canvas
mdbChart
[type]="'pie'"
[datasets]="datasets"
[labels]="labels"
[options]="options"
[plugins]="plugins"
></canvas>
import { Component } from '@angular/core';
import ChartDatalabels from 'chartjs-plugin-datalabels';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
datasets = [
{
label: 'Traffic',
data: [30, 45, 62, 65, 61],
backgroundColor: [
'rgba(63, 81, 181, 0.5)',
'rgba(77, 182, 172, 0.5)',
'rgba(66, 133, 244, 0.5)',
'rgba(156, 39, 176, 0.5)',
'rgba(233, 30, 99, 0.5)',
],
},
];
labels = ['January', 'February', 'March', 'April', 'May'];
options = {
plugins: {
datalabels: {
formatter: (value: number) => {
let sum = 0;
// Assign the data to the variable and format it according to your needs
let dataArr = this.datasets[0].data;
dataArr.map((data: any) => {
sum += data;
});
let percentage = ((value * 100) / sum).toFixed(2) + '%';
return percentage;
},
color: 'white',
labels: {
title: {
font: {
size: '14',
},
},
},
},
},
};
plugins = [ChartDatalabels];
}
Double Y axis
In the example below we created chart with double Y axis with 2 datasets, each one with completely different data range.
Such a construction requires a scale adjustment, so the left axis is assigned and adjusted to the first dataset, and the right axis to the second dataset.
<canvas
mdbChart
[type]="'bar'"
[datasets]="datasets"
[labels]="labels"
[options]="options"
></canvas>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
datasets = [
{
label: 'Impressions',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
order: 1,
yAxisID: 'y',
},
{
label: 'Impressions (absolute top) %',
yAxisID: 'y2',
data: [1.5, 2, 0.5, 3, 1.2, 4, 3.4],
type: 'line',
order: 0,
backgroundColor: 'rgba(66, 133, 244, 0.0)',
borderColor: '#94DFD7',
borderWidth: 2,
pointBorderColor: '#94DFD7',
pointBackgroundColor: '#94DFD7',
lineTension: 0.0,
},
];
labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
options = {
scales: {
y1: {
stacked: false,
position: 'left',
grid: {
drawOnChartArea: false,
drawBorder: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
y2: {
stacked: false,
position: 'right',
grid: {
drawOnChartArea: false,
},
ticks: {
beginAtZero: true,
},
},
},
};
}
Funnel
Example of horizontal bar chart with custom options and labels formatting (calculating integers numbers into percentages).
This data visualization is often used to visualize the flow of the website traffic.
<canvas
mdbChart
[type]="'bar'"
[datasets]="datasets"
[labels]="labels"
[options]="options"
></canvas>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
datasets = [
{
data: [2112, 343, 45],
barPercentage: 1.24,
},
];
labels = ['Product views', 'Checkout', 'Purchases'];
options = {
indexAxis: 'y',
scales: {
x: {
gridLines: {
offsetGridLines: true,
},
},
},
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: (value: number) => {
let sum = 0;
let dataArr = this.datasets[0].data;
dataArr.map((data) => {
sum += data;
});
let percentage = ((value * 100) / sum).toFixed(2) + '%';
return percentage;
},
color: '#4f4f4f',
labels: {
title: {
font: {
size: '13',
},
anchor: 'end',
align: 'right',
},
},
},
},
};
}
Formatting values on the Y axes
In the example below we simply add "$" before each value on the Y axis.
<canvas
mdbChart
[type]="'bar'"
[datasets]="datasets"
[labels]="labels"
[options]="options"
></canvas>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
datasets = [
{
label: 'Sales',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
];
labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
options = {
scales: {
y: {
ticks: {
callback: function (value: any) {
return '$' + value;
},
},
},
},
};
}
Formatting values in the tooltips
In the example below we simply add "$" before each value displayed in the tooltips.
Hover the line of the chart to see the tooltip.
<canvas
mdbChart
[type]="'line'"
[datasets]="datasets"
[labels]="labels"
[options]="options"
></canvas>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
datasets = [
{
label: 'Sales',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
];
labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
options = {
plugins: {
tooltip: {
callbacks: {
label: function (value: any) {
return `$ ${value.parsed.y}`;
},
},
},
},
};
}
Double datasets in a bar chart
Example of the double datasets in a bar chart.
<canvas
mdbChart
[type]="'bar'"
[datasets]="datasets"
[labels]="labels"
[options]="options"
></canvas>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
datasets = [
{
label: 'Users',
data: [510, 653, 255],
},
{
label: 'Page views',
data: [1251, 1553, 1355],
backgroundColor: '#94DFD7',
borderColor: '#94DFD7',
},
];
labels = ['Desktop', 'Mobile', 'Tablet'];
options = {
scales: {
y: {
stacked: false,
ticks: {
beginAtZero: true,
},
},
x: {
stacked: false,
},
},
};
Async data
Example of fetching data from the JSON file.
<canvas
mdbChart
[type]="'bar'"
[datasets]="datasets"
[labels]="labels"
></canvas>
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
datasets: any[] = [];
labels: any[] = [];
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.http
.get(
'https://disease.sh/v3/covid-19/historical/Poland?lastdays=all'
)
.subscribe((data: any) => {
const dataPoland = data.timeline['cases'];
const dataset = Object.entries(dataPoland).map((item) => item[1]);
const labels = Object.keys(dataPoland);
this.labels = [...labels];
this.datasets = [
{
color: '#FFCDD2',
data: dataset,
label: 'Number of cases',
borderColor: dataset.color,
},
];
});
}
}