Download image button in a tag, Codeigniter 3 download image button – datainflow
The doughnut chart is probably the most commonly used chart. The arc of each segment shows the proportional value of each piece of data. Bootstrap 4 Chartjs Doughnut chart snippet example is best for all kinds of projects. Donut Chart Example As you can see in the full demo. Create a Doughnut chart on your web page.
HTML:
<div class="row justify-content-md-center"> <div class="col-sm-12"> <div class=""> <canvas id="doughnut" class="ht-175 drop-shadow"></canvas> </div> </div> </div>
Bootstrap 4 CSS
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
Bootstrap 4 CSS
https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
JS
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
Example Code:
$(document).ready(function(){ var ctx = $("#doughnut"); var myLineChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["5-Star", "4-Star", "3-Star", "2-Star", "1-Star"], datasets: [{ data: [1200, 1700, 800, 200, 100], backgroundColor: ["#f53c5b", "#0ba360", "#3858f9", "#17a2b8", "#ffc107"] }] }, options: { title: { display: true, text: 'Rating' } } }); });
Apply the links and example code on your web page.
Related posts