<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <div class="container"> <h2>Chart.js — Pie Chart Demo</h2> <div> <canvas id="myChart" height="100" ></canvas> </div> </div>

var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["Green", "Blue", "Black"], datasets: [{ backgroundColor: [ "#2ecc71", "#e74c3c", "#34495e" ], data: [12, 19, 7] }] } });