Bootstrap 4 + Chart.js

Example Line, Bar and Donut Charts

Tom Michew
WDstack
2 min readMay 5, 2018

--

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

Next, some data for the Line chart. 2 datasets with some random numbers plotted on the weekdays…

Then configure and init Chart.js with jQuery or JavaScript

Bootstrap 4 + Chart.js Line Chart Example

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

Bootstrap 4 + Chart.js Bar Chart Example

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…

Bootstrap 4 + Chart.js Pie Donut Chart Example

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

--

--

Tom Michew
WDstack

Technical marketer, developer, startup guy #growthhacker @wdstack @codeplyapp