Charts
Bootstrap 5 Charts
MDB charts are visual representations of data. They are responsive and easy to customize. At your disposal are eight types of charts with multiple options for customization.
Note: Read the API tab to find all available options and advanced customization.
Note 2: See also advanced charts documentation to see an implementation of the advanced options.
Required ES init:
Chart
*
* UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB method.
Bar chart
You can initialize simple charts with data-mdb-attributes - it doesn't require
any additional JS code.
Note: This method allows only one dataset - more complicated charts require JavaScript initialization.
Via data-mdb-attributes:
<canvas
data-mdb-chart-init
data-mdb-chart="bar"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js'
initMDB({ Chart });
The same effect achieved via Javascript initialization:
<canvas id="bar-chart"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js'
initMDB({ Chart });
// Chart
const dataBar = {
type: 'bar',
data: {
labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
},
};
new Chart(document.getElementById('bar-chart'), dataBar);
// Chart
const dataBar = {
type: 'bar',
data: {
labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
},
};
new mdb.Chart(document.getElementById('bar-chart'), dataBar);
Line chart
To use our minimalistic line chart, set the type option to line.
Via data-mdb-attributes:
<canvas
data-mdb-chart-init
data-mdb-chart="line"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js'
initMDB({ Chart });
Via JavaScript:
<canvas id="line-chart"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Chart
const dataLine = {
type: 'line',
data: {
labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
},
};
new Chart(document.getElementById('line-chart'), dataLine);
// Chart
const dataLine = {
type: 'line',
data: {
labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
},
};
new mdb.Chart(document.getElementById('line-chart'), dataLine);
Bar chart horizontal
Change the orientation of your bar chart from vertical to horizontal by setting
the indexAxis option to 'y'.
<canvas id="bar-chart-horizontal"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Chart
const dataBarHorizontal = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
const optionsBarHorizontal = {
options: {
indexAxis: 'y',
scales: {
x: {
stacked: true,
grid: {
display: true,
borderDash: [2],
zeroLineColor: 'rgba(0,0,0,0)',
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
ticks: {
color: 'rgba(0,0,0, 0.5)',
},
},
y: {
stacked: true,
grid: {
display: false,
},
ticks: {
color: 'rgba(0,0,0, 0.5)',
},
},
},
},
};
new Chart(document.getElementById('bar-chart-horizontal'), dataBarHorizontal, optionsBarHorizontal);
// Chart
const dataBarHorizontal = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
const optionsBarHorizontal = {
options: {
indexAxis: 'y',
scales: {
x: {
stacked: true,
grid: {
display: true,
borderDash: [2],
zeroLineColor: 'rgba(0,0,0,0)',
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
ticks: {
color: 'rgba(0,0,0, 0.5)',
},
},
y: {
stacked: true,
grid: {
display: false,
},
ticks: {
color: 'rgba(0,0,0, 0.5)',
},
},
},
},
};
new mdb.Chart(document.getElementById('bar-chart-horizontal'), dataBarHorizontal, optionsBarHorizontal);
Pie chart
A chart with the type pie splits the circle into several pieces to represent a
dataset's values as an area's percentage.
Via data-mdb-attributes:
<canvas
data-mdb-chart-init
data-mdb-chart="pie"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-mdb-dataset-background-color="['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)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']"
></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js'
initMDB({ Chart });
Via JavaScript:
<canvas id="pie-chart"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Chart
const dataPie = {
type: 'pie',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
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)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
},
],
},
};
new Chart(document.getElementById('pie-chart'), dataPie);
// Chart
const dataPie = {
type: 'pie',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
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)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
},
],
},
};
new mdb.Chart(document.getElementById('pie-chart'), dataPie);
Doughnut chart
Another type of graph representing data as an area's percentage is a doughnut chart.
Via data-mdb-attributes:
<canvas
data-mdb-chart-init
data-mdb-chart="doughnut"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-mdb-dataset-background-color="['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)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']"
></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js'
initMDB({ Chart });
Via JavaScript:
<canvas id="doughnut-chart"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Chart
const dataDoughnut = {
type: 'doughnut',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
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)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
},
],
},
};
new Chart(document.getElementById('doughnut-chart'), dataDoughnut);
// Chart
const dataDoughnut = {
type: 'doughnut',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
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)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
},
],
},
};
new mdb.Chart(document.getElementById('doughnut-chart'), dataDoughnut);
Polar chart
Polar area graph will split the circle into pieces with equal angles and different radius.
Via data-mdb-attributes:
<canvas
data-mdb-chart-init
data-mdb-chart="polarArea"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-mdb-dataset-background-color="['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)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']"
></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js'
initMDB({ Chart });
Via JavaScript:
<canvas id="polar-area-chart"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Chart
const dataPolar = {
type: 'polarArea',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
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)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
},
],
},
};
new Chart(document.getElementById('polar-area-chart'), dataPolar);
// Chart
const dataPolar = {
type: 'polarArea',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
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)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
},
],
},
};
new mdb.Chart(document.getElementById('polar-area-chart'), dataPolar);
Radar chart
This type of chart will enclose the area based on a dataset's values.
Via data-mdb-attributes:
<canvas
data-mdb-chart-init
data-mdb-chart="radar"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js'
initMDB({ Chart });
Via JavaScript:
<canvas id="radar-chart"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Chart
const dataRadar = {
type: 'radar',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
},
};
new Chart(document.getElementById('radar-chart'), dataRadar);
// Chart
const dataRadar = {
type: 'radar',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
},
};
new mdb.Chart(document.getElementById('radar-chart'), dataRadar);
Bubble chart
This graph visualizes data in a series of "bubbles" with customized coordinates and radius.
Note: As mentioned before, charts with more than one dataset cannot be initialized using data attributes. For more intricate setups, you'll need to handle the initialization using JavaScript.
<canvas id="bubble-chart"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Chart
const dataBubble = {
type: 'bubble',
data: {
datasets: [
{
label: 'John',
data: [
{
x: 3,
y: 7,
r: 10,
},
],
backgroundColor: '#ff6384',
hoverBackgroundColor: '#ff6384',
},
{
label: 'Peter',
data: [
{
x: 5,
y: 7,
r: 10,
},
],
backgroundColor: '#44e4ee',
hoverBackgroundColor: '#44e4ee',
},
{
label: 'Donald',
data: [
{
x: 7,
y: 7,
r: 10,
},
],
backgroundColor: '#62088A',
hoverBackgroundColor: '#62088A',
},
],
},
};
new Chart(document.getElementById('bubble-chart'), dataBubble);
// Chart
const dataBubble = {
type: 'bubble',
data: {
datasets: [
{
label: 'John',
data: [
{
x: 3,
y: 7,
r: 10,
},
],
backgroundColor: '#ff6384',
hoverBackgroundColor: '#ff6384',
},
{
label: 'Peter',
data: [
{
x: 5,
y: 7,
r: 10,
},
],
backgroundColor: '#44e4ee',
hoverBackgroundColor: '#44e4ee',
},
{
label: 'Donald',
data: [
{
x: 7,
y: 7,
r: 10,
},
],
backgroundColor: '#62088A',
hoverBackgroundColor: '#62088A',
},
],
},
};
new mdb.Chart(document.getElementById('bubble-chart'), dataBubble);
Scatter chart
Use this chart to represent your data as a series of points with x and y coordinates.
Note: This chart also requires initialization via JavaScript. Initialization via data-mdb-attributes is not possible.
<canvas id="scatter-chart"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Chart
const dataScatter = {
type: 'scatter',
data: {
datasets: [
{
borderColor: '#4285F4',
backgroundColor: 'rgba(66, 133, 244, 0.5)',
label: 'V(node2)',
data: [
{
x: 1,
y: -1.711e-2,
},
{
x: 1.26,
y: -2.708e-2,
},
{
x: 1.58,
y: -4.285e-2,
},
{
x: 2.0,
y: -6.772e-2,
},
{
x: 2.51,
y: -1.068e-1,
},
{
x: 3.16,
y: -1.681e-1,
},
{
x: 3.98,
y: -2.635e-1,
},
{
x: 5.01,
y: -4.106e-1,
},
{
x: 6.31,
y: -6.339e-1,
},
{
x: 7.94,
y: -9.659e-1,
},
{
x: 10.0,
y: -1.445,
},
{
x: 12.6,
y: -2.11,
},
{
x: 15.8,
y: -2.992,
},
{
x: 20.0,
y: -4.102,
},
{
x: 25.1,
y: -5.429,
},
{
x: 31.6,
y: -6.944,
},
{
x: 39.8,
y: -8.607,
},
{
x: 50.1,
y: -1.038e1,
},
{
x: 63.1,
y: -1.223e1,
},
{
x: 79.4,
y: -1.413e1,
},
{
x: 100.0,
y: -1.607e1,
},
{
x: 126,
y: -1.803e1,
},
{
x: 158,
y: -2e1,
},
{
x: 200,
y: -2.199e1,
},
{
x: 251,
y: -2.398e1,
},
{
x: 316,
y: -2.597e1,
},
{
x: 398,
y: -2.797e1,
},
{
x: 501,
y: -2.996e1,
},
{
x: 631,
y: -3.196e1,
},
{
x: 794,
y: -3.396e1,
},
{
x: 1000,
y: -3.596e1,
},
],
},
],
},
};
const optionsScatter = {
options: {
title: {
display: true,
text: 'Scatter Chart - Logarithmic X-Axis',
},
scales: {
x:
{
type: 'logarithmic',
position: 'bottom',
ticks: {
userCallback: function (tick) {
var remain = tick / Math.pow(10, Math.floor(Chart.helpers.log10(tick)));
if (remain === 1 || remain === 2 || remain === 5) {
return tick.toString() + 'Hz';
}
return '';
},
},
scaleLabel: {
labelString: 'Frequency',
display: true,
},
},
y:
{
type: 'linear',
ticks: {
userCallback: function (tick) {
return tick.toString() + 'dB';
},
},
scaleLabel: {
labelString: 'Voltage',
display: true,
},
},
},
},
};
new Chart(document.getElementById('scatter-chart'), dataScatter, optionsScatter);
// Chart
const dataScatter = {
type: 'scatter',
data: {
datasets: [
{
borderColor: '#4285F4',
backgroundColor: 'rgba(66, 133, 244, 0.5)',
label: 'V(node2)',
data: [
{
x: 1,
y: -1.711e-2,
},
{
x: 1.26,
y: -2.708e-2,
},
{
x: 1.58,
y: -4.285e-2,
},
{
x: 2.0,
y: -6.772e-2,
},
{
x: 2.51,
y: -1.068e-1,
},
{
x: 3.16,
y: -1.681e-1,
},
{
x: 3.98,
y: -2.635e-1,
},
{
x: 5.01,
y: -4.106e-1,
},
{
x: 6.31,
y: -6.339e-1,
},
{
x: 7.94,
y: -9.659e-1,
},
{
x: 10.0,
y: -1.445,
},
{
x: 12.6,
y: -2.11,
},
{
x: 15.8,
y: -2.992,
},
{
x: 20.0,
y: -4.102,
},
{
x: 25.1,
y: -5.429,
},
{
x: 31.6,
y: -6.944,
},
{
x: 39.8,
y: -8.607,
},
{
x: 50.1,
y: -1.038e1,
},
{
x: 63.1,
y: -1.223e1,
},
{
x: 79.4,
y: -1.413e1,
},
{
x: 100.0,
y: -1.607e1,
},
{
x: 126,
y: -1.803e1,
},
{
x: 158,
y: -2e1,
},
{
x: 200,
y: -2.199e1,
},
{
x: 251,
y: -2.398e1,
},
{
x: 316,
y: -2.597e1,
},
{
x: 398,
y: -2.797e1,
},
{
x: 501,
y: -2.996e1,
},
{
x: 631,
y: -3.196e1,
},
{
x: 794,
y: -3.396e1,
},
{
x: 1000,
y: -3.596e1,
},
],
},
],
},
};
const optionsScatter = {
options: {
title: {
display: true,
text: 'Scatter Chart - Logarithmic X-Axis',
},
scales: {
x:
{
type: 'logarithmic',
position: 'bottom',
ticks: {
userCallback: function (tick) {
var remain = tick / Math.pow(10, Math.floor(Chart.helpers.log10(tick)));
if (remain === 1 || remain === 2 || remain === 5) {
return tick.toString() + 'Hz';
}
return '';
},
},
scaleLabel: {
labelString: 'Frequency',
display: true,
},
},
y:
{
type: 'linear',
ticks: {
userCallback: function (tick) {
return tick.toString() + 'dB';
},
},
scaleLabel: {
labelString: 'Voltage',
display: true,
},
},
},
},
};
new mdb.Chart(document.getElementById('scatter-chart'), dataScatter, optionsScatter);
Bar chart with custom 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.
Note: Read API tab to learn more about available options.
<canvas id="bar-chart-custom-options"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Bar chart with custom options
const dataBarCustomOptions = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
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,
},
],
},
};
const optionsBarCustomOptions = {
options: {
plugins: {
legend: {
labels: {
color: 'green'
position: 'top',
}
},
scales: {
x:
{
ticks: {
color: '#4285F4',
},
},
y:
{
ticks: {
color: '#f44242',
},
},
},
},
},
};
new Chart(
document.getElementById('bar-chart-custom-options'),
dataBarCustomOptions,
optionsBarCustomOptions
);
// Bar chart with custom options
const dataBarCustomOptions = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
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,
},
],
},
};
const optionsBarCustomOptions = {
options: {
plugins: {
legend: {
labels: {
color: 'green'
position: 'top',
}
},
scales: {
x:
{
ticks: {
color: '#4285F4',
},
},
y:
{
ticks: {
color: '#f44242',
},
},
},
},
},
};
new mdb.Chart(
document.getElementById('bar-chart-custom-options'),
dataBarCustomOptions,
optionsBarCustomOptions
);
Bar chart with custom tooltip
Set custom text format inside a tooltip by using plugins option.
<canvas id="bar-chart-custom-tooltip"></canvas>
// Initialization for ES Users
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js';
initMDB({ Chart });
// Bar chart with custom tooltip
const dataBarCustomTooltip = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
const optionsBarCustomTooltip = {
options: {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || '';
label = `${label}: ${context.formattedValue} users`;
return label;
},
},
},
},
},
};
new Chart(
document.getElementById('bar-chart-custom-tooltip'),
dataBarCustomTooltip,
optionsBarCustomTooltip);
// Bar chart with custom tooltip
const dataBarCustomTooltip = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
const optionsBarCustomTooltip = {
options: {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || '';
label = `${label}: ${context.formattedValue} users`;
return label;
},
},
},
},
},
};
new mdb.Chart(
document.getElementById('bar-chart-custom-tooltip'),
dataBarCustomTooltip,
optionsBarCustomTooltip);
Charts - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must
first import the component and then initialize it with the initMDB method. If you are going to use the UMD format,
just import the mdb-ui-kit package.
import { Chart, initMDB } from 'mdb-ui-kit/js/chart.es.min.js'
initMDB({ Chart });
import 'mdb-ui-kit';
Usage
Via data attributes
Using the Chart component doesn't require any additional JavaScript code - simply add
data-mdb-chart-init attribute to
canvas tag
and use other data attributes to set all options.
For ES format, you must first import and call the initMDB method.
<canvas
data-mdb-chart-init
class="col-sm-12 col-md-10 col-xl-8 mb-4"
data-mdb-chart="bar"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>
Via JavaScript
When using the Chart constructor to initialize an instance, you can specify three parameters.
The first argument is a wrapper element for a chart, second is a data object with
necessary information about displayed datasets. The last are options - each Chart
has its default settings provided by the component, so this parameter is optional.
<canvas id="bar-chart"></canvas>
// Bar chart
const dataBar = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
new Chart(document.getElementById('bar-chart'), dataBar);
// Bar chart
const dataBar = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
new mdb.Chart(document.getElementById('bar-chart'), dataBar);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
<canvas id="bar-chart"></canvas>
// Bar chart
const dataBar = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
$(document).ready(() => {
$('#bar-chart').chart(dataBar);
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-, as in data-mdb-background-color="".
Note: Scatter and bubble charts has to be initialized with
JavaScript.
| Name | Type | Description |
|---|---|---|
data-mdb-chart
|
String | Attribute responsible for defining a type. |
data-mdb-labels
|
String | Labels for x-axis |
data-mdb-dataset-label
|
String | Label values for datasets |
data-mdb-dataset-background-color
|
Color[ ] | A single color or an array of colors for datasets |
data-mdb-dataset-border-color
|
Color[ ] | A single border or line color or an array of border colors for datasets |
data-mdb-dataset-border-width
|
Number[ ] | Single border thickness or a border thickness table for datasets |
data-mdb-dataset-data
|
Number[ ] | Value sets for charts |
Line chart options
The line chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.
| Name | Type | Description |
|---|---|---|
label
|
String | The label for the dataset that appears in the legend and tooltips. |
xAxisID
|
String | The ID of the x-axis to plot this dataset on. If not specified, this defaults to the ID of the first found x-axis |
yAxisID
|
String | The ID of the y-axis to plot this dataset on. If not specified, this defaults to the ID of the first found y-axis. |
backgroundColor
|
Color | The fill color under the line. |
borderColor
|
Color | The color of the line. |
borderWidth
|
Number | The width of the line in pixels. |
borderDash
|
Number | The length and spacing of dashes. |
borderDashOffset
|
Number | Offset for line dashes. |
borderCapStyle
|
String | Cap style of the line. |
borderJoinStyle
|
String | Line joint style. |
cubicInterpolationMode
|
String | The algorithm used to interpolate a smooth curve from the discrete data points. |
fill
|
Boolean/String | How to fill the area under the line. |
lineTension
|
Number | Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used. |
pointBackgroundColor
|
Color/Color[ ] | The fill color for points. |
pointBorderColor
|
Color/Color[ ] | The border color for points. |
pointBorderWidth
|
Number/Number[ ] | The width of the point border in pixels. |
pointRadius
|
Number/Number[ ] | The radius of the point shape. If set to 0, the point is not rendered. |
pointStyle
|
String/String[ ]/Image/Image[ ] | Style of the point. |
pointRotation
|
Number/Number[ ] | The rotation of the point in degrees. |
pointHitRadius
|
Number/Number[ ] | The pixel size of the non-displayed point that reacts to mouse events. |
pointHoverBackgroundColor
|
Color/Color[ ] | Point background color when hovered. |
pointHoverBorderColor
|
Color/Color[ ] | Point border color when hovered. |
pointHoverBorderWidth
|
Number/Number[ ] | The border width of a point when hovered over. |
pointHoverRadius
|
Number/Number[ ] | The radius of the point when hovered over. |
showLine
|
Boolean | If false, the line is not drawn for this dataset. |
spanGaps
|
Boolean | If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line |
steppedLine
|
Boolean/String | If the line is shown as a stepped line. |
Bar chart options
The bar chart allows specifying several properties for each dataset. Besides, some of them can be defined as an array - this way the first value applies to the first bar, the second to the second bar, etc.
| Name | Type | Description |
|---|---|---|
label
|
String | The label for the dataset which appears in the legend and tooltips. |
xAxisID
|
String | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis |
yAxisID
|
String | The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis. |
backgroundColor
|
Color/Color[ ] | The fill color of the bar. |
borderColor
|
Color/Color[ ] | The color of the bar border. |
borderWidth
|
Number/Number[ ] | The stroke width of the bar in pixels. |
borderSkipped
|
String | Which edge to skip drawing the border for. |
hoverBackgroundColor
|
Color/Color[ ] | The fill colour of the bars when hovered. |
hoverBorderColor
|
Color/Color[ ] | The stroke colour of the bars when hovered. |
hoverBorderWidth
|
Number/Number[ ] | The stroke width of the bars when hovered. |
Radar chart options
The radar chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.
| Name | Type | Description |
|---|---|---|
label
|
String | The label for the dataset which appears in the legend and tooltips. |
backgroundColor
|
Color | The fill color under the line. |
borderColor
|
Color | The color of the line. |
borderWidth
|
Number | The width of the line in pixels. |
borderDash
|
Number[ ] | Length and spacing of dashes. S |
borderDashOffset
|
Number | Offset for line dashes. |
borderCapStyle
|
String | Cap style of the line |
borderJoinStyle
|
String | Line joint style |
fill
|
Boolean/String | How to fill the area under the line. |
lineTension
|
Number | Bezier curve tension of the line. Set to 0 to draw straightlines. |
pointBackgroundColor
|
Color/Color[ ] | The fill color for points. |
pointBorderColor
|
Color/Color[ ] | The border color for points. |
pointBorderWidth
|
Number/Number[ ] | The width of the point border in pixels. |
pointRadius
|
Number/Number[ ] | TThe radius of the point shape. If set to 0, the point is not rendered. |
pointRotation
|
Number/Number[ ] | The rotation of the point in degrees. |
pointStyle
|
String/String[ ]/Image/Image[ ] | Style of the point. |
pointHitRadius
|
Number/Number[ ] | The pixel size of the non-displayed point that reacts to mouse events. |
pointHoverBackgroundColor
|
Color/Color[ ] | Point background color when hovered. |
pointHoverBorderColor
|
Color/Color[ ] | Point border color when hovered. |
pointHoverBorderWidth
|
Number/Number[ ] | Border width of point when hovered. |
pointHoverRadius
|
Number/Number[ ] | The radius of the point when hovered. |
Doughnut and Pie chart options
In Doughnut and Pie charts passing an array of values to an option will apply each of them to a corresponding entry in a dataset.
| Name | Type | Description |
|---|---|---|
backgroundColor
|
Color[ ] | The fill color of the arcs in the dataset. |
borderColor
|
Color[ ] | The border color of the arcs in the dataset. |
borderWidth
|
Number[ ] | The border width of the arcs in the dataset. |
hoverBackgroundColor
|
Color[ ] | The fill colour of the arcs when hovered. |
hoverBorderColor
|
Color[ ] | The stroke colour of the arcs when hovered. |
hoverBorderWidth
|
Number[ ] | The stroke width of the arcs when hovered. |
Polar Area chart options
Polar area charts are similar to pie charts, but each segment has the same angle and differs in the radius (depending on the value).
| Name | Type | Description |
|---|---|---|
backgroundColor
|
Color | The fill color of the arcs in the dataset. |
borderColor
|
Color | The border color of the arcs in the dataset. |
borderWidth
|
number | The border width of the arcs in the dataset. |
hoverBackgroundColor
|
Color | The fill colour of the arcs when hovered. |
hoverBorderColor
|
Color | The stroke colour of the arcs when hovered. |
hoverBorderWidth
|
number | The stroke width of the arcs when hovered. |
Bubble chart options
A bubble chart displays a series of points with x and y coordinates. The z coordinate determines the size of each bubble.
| Name | Type | Description |
|---|---|---|
backgroundColor
|
Color | bubble background color |
borderColor
|
Color | bubble border color |
borderWidth
|
Number | bubble border width (in pixels) |
hoverBackgroundColor
|
Color | bubble background color when hovered |
hoverBorderColor
|
Color | bubble border color when hovered |
hoverBorderWidth
|
Number | bubble border width when hovered (in pixels) |
hoverRadius
|
Number | bubble additional radius when hovered (in pixels) |
hitRadius
|
Number | bubble additional radius for hit detection (in pixels). |
label
|
String | The label for the dataset which appears in the legend and tooltips. |
order
|
Number | The drawing order of dataset. |
pointStyle
|
String | bubble shape style. |
rotation
|
Number | bubble rotation (in degrees). |
radius
|
Number | bubble radius (in pixels). |
Scatter chart options
Scatter chart displays the dataset as a series of points with z and y coordinates.
The scatter chart supports the same properties as the line chart.
Chart Legend options
Chart legend options allow changing the graphic part of the legend.
| Name | Type | Default | Description |
|---|---|---|---|
display
|
Boolean | true | showing legend |
position
|
String | 'top' | Position of the legend. |
fullWidth
|
Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use. |
onClick
|
Function |
A callback that is called when a click event is registered on a label item |
|
onHover
|
Function |
A callback that is called when a 'mousemove' event is registered on top of a label item |
|
reverse
|
Boolean | false |
Legend will show datasets in reverse order. |
labels
|
Object |
See documentation about labels in table below. |
Chart Legend options - label configuration
Chart legend options - label configuration allow changing the text part of the legend.
| Name | Type | Default | Description |
|---|---|---|---|
boxWidth
|
Number | 40 | width of coloured box |
font.size
|
Number | 12 | font size of text |
font.style
|
String | 'normal' | font style of text |
color
|
Color | '#666' |
Color of text |
font.family
|
String | "Roboto" |
Font family of legend text. |
padding
|
Number | 10 |
Padding between rows of colored boxes. . |
generateLabels
|
Function |
Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. |
|
filter
|
Function | null |
Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data. |
usePointStyle
|
Boolean | false |
Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case). |
backgroundColor
|
Style/Null | Null |
Background color of datalabels. . |
Methods
| Name | Description | Example |
|---|---|---|
update(data, config)
|
Updates the chart's data and calls .update(mode?) method. In this method, passing both arguments is required. However, when only the data is changed, the second argument can be an empty object. |
myChart.update(data, config)
|
dispose
|
Removes a mdb.Chart instance |
myChart.dispose()
|
getInstance
|
Static method which allows you to get the chart instance associated to a DOM element. |
Chart.getInstance(chartEl)
|
getOrCreateInstance
|
Static method which returns the chart instance associated to a DOM element or create a new one in case it wasn't initialized. |
Chart.getOrCreateInstance(chartEl)
|
const myChart = document.getElementById('myChart');
const instance = new Chart(myChart, data, options);
instance.dispose();
const myChart = document.getElementById('myChart');
const instance = new mdb.Chart(myChart, data, options);
instance.dispose();
Events
Event handling in Charts differs from other MDB components - in the
options parameter you can define which events should be triggered and handlers
for some of them (click, hover).
| Name | Type | Default | Description |
|---|---|---|---|
events
|
string[ ] |
['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']
|
The events option defines the browser events
that the chart should listen to for tooltips and hovering.
|
onHover |
function | null |
Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc). |
onClick
|
function | null |
Called if the event is of type
'mouseup' or
'click'. Called in the context of the chart and
passed the event and an array of active elements.
|
const eventOption = {
options: {
// This chart will not respond to mousemove, etc
events: ['click']
}
};