Bootstrap 4 + Chart.js
Example Line, Bar and Donut Charts
Now that Bootstrap 4.1.1 is out I decided to explore using it alongside Chart.js. These popular Web development toolkits nicely compliment each other to make easy, responsive and consistent layouts with charts.
Line Chart
First, we need an HTML5 Canvas element that will be the placeholder for the chart. We’ll utilize the responsive Bootstrap Grid, and put the <canvas>
inside a Bootstrap Card…
<div class="container">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<canvas id="chLine"></canvas>
</div>
</div>
</div>
</div>
</div>
Next, some data for the Line chart. 2 datasets with some random numbers plotted on the weekdays…
var chartData = {
labels: ["S", "M", "T", "W", "T", "F", "S"],
datasets: [{
data: [589, 445, 483, 503, 689, 692, 634],
},
{
data: [639, 465, 493, 478, 589, 632, 674],
}]
};
Then configure and init Chart.js with jQuery or JavaScript…
var chLine = document.getElementById("chLine");
if (chLine) {
new Chart(chLine, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false
}
}
});
}
Bar Chart
Using similar data, I created a Bar chart. To make the bars thinner than the default Chart.js width, I used the barPercentage
and categoryPercentage
options on the scales.xAxes
…
var chBar = document.getElementById("chBar");
var chartData = {
labels: ["S", "M", "T", "W", "T", "F", "S"],
datasets: [{
data: [589, 445, 483, 503, 689, 692, 634],
backgroundColor: colors[0]
},
{
data: [209, 245, 383, 403, 589, 692, 580],
backgroundColor: colors[1]
},
{
data: [489, 135, 483, 290, 189, 603, 600],
backgroundColor: colors[2]
},
{
data: [639, 465, 493, 478, 589, 632, 674],
backgroundColor: colors[4]
}]
};if (chBar) {
new Chart(chBar, {
type: 'bar',
data: chartData,
options: {
scales: {
xAxes: [{
barPercentage: 0.4,
categoryPercentage: 0.5
}],
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false
}
}
});
}
Pie / Donut Chart
In Chart.js, a “Donut” chart is a Pie chart with the center cut-out using the cutoutPercentage
option. To create my Donut charts I used the following config…
var donutOptions = {
cutoutPercentage: 85,
legend: {position:'bottom',
labels:{pointStyle:'circle',
usePointStyle:true}
}
};var chDonutData1 = {
labels: ['Bootstrap', 'Popper', 'Other'],
datasets: [
{
backgroundColor: colors.slice(0,3),
borderWidth: 0,
data: [74, 11, 40]
}
]
};var chDonut1 = document.getElementById("chDonut1");
if (chDonut1) {
new Chart(chDonut1, {
type: 'pie',
data: chDonutData1,
options: donutOptions
});
}
As you can see in the full demo, the Bootstrap Grid and Cards work well to contain the charts which scale responsively with the browser width.
I hope that these examples will help you with your Bootstrap 4 data visualization projects. Check out the full collection of Bootstrap 4 examples on Codeply.
❤ __ Tom Michew