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
    }
  }
  });
}

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…

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
    }
  }
  });
}

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…

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
  });
}

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