<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Bootstrap 4 Chart.js</h4>
Ref: https://www.codeply.com/go/3l6UhaQEhq/bootstrap-4-chartjs
</div>
</div>
<div class="row my-2">
<div class="col-md-6 py-1">
<div class="card">
<div class="card-body">
<canvas id="chBar"></canvas>
</div>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
/* chart.js chart examples */
// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];
/* bar chart */
var chBar = document.getElementById("chBar");
if (chBar) {
new Chart(chBar, {
type: 'bar',
data: {
labels: ["S", "M", "T", "W", "T", "F", "S"],
datasets: [{
data: [589, 445, 483, 503, 689, 692, 634],
backgroundColor: colors[0]
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
barPercentage: 0.4,
categoryPercentage: 0.5
}]
}
}
});
}
