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>
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
height: 500px;
}
.div1 {
grid-area: 1 / 1 / 3 / 3;
background: #00A2E8;
}
.div2 {
grid-area: 3 / 1 / 5 / 3;
background: #22b14c;
}
.div3 {
grid-area: 1 / 3 / 5 / 5;
background: #ED1C24;
}
@media ( max-width: 600px) {
.div1 {
grid-area: 1 / 1 / 2 / 5;
}
.div2 {
grid-area: 4 / 1 / 5 / 5;
}
.div3 {
grid-area: 2 / 1 / 4 / 5;
}
}
/* Additional styles */
.container>div {
color: #fff;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
}