Show percentage in Pie Piece
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<section id="main-content">
<div class="container">
<div class="row" id="top-content">
<div class="col-lg-4" id="left-content">
<h1 class="flex-item1">1</h1>
<div class="card-custom flex-item2">
2
</div>
</div>
<div class="col-lg-8" id="right-content">
<div class="flex-item3"> 3
</div>
</div>
</div>
</div>
</section>
CSS
.flex-item1 {
background:skyblue;
width; 150px;
height: 100px;
}
.flex-item2{
width: 150px;
height: 100px;
background: green
}
.flex-item3{
width: 300px;
height: 400px;
background: red;
}
@media only screen and (max-width: 600px) {
.flex-item1 {
order: 1;
}
.flex-item2{
order: 3;
}
.flex-item3{
order: 2;
}
}