Bar chart
Bootstrap 5 Bar chart component
Responsive Bar chart built with Bootstrap 5. Learn how to create a Bootstrap Bar Chart and see examples of proper implementation and customization.
Basic example
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="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>
The same effect achieved via Javascript initialization:
<canvas id="bar-chart"></canvas>
// 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);
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>
// 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);
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="chart-options-example"></canvas>
// Data
const dataChartOptionsExample = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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,
},
],
},
};
// Options
const optionsChartOptionsExample = {
options: {
scales: {
x:
{
ticks: {
color: '#4285F4',
},
},
y:
{
ticks: {
color: '#f44242',
},
},
},
},
};
new mdb.Chart(
document.getElementById('chart-options-example'),
dataChartOptionsExample,
optionsChartOptionsExample
);
Bar chart with custom tooltip
Set custom text format inside a tooltip by using plugins option.
<canvas id="bar-chart-custom-tooltip"></canvas>
// 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);