{Theme} comes with two types of pie charts.
Type 1
Pie Chart – type 1
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-graphBox ct-graphBox--default"> <div class="ct-graphBox-graph"> <canvas width="150" height="150" class="ct-js-pieChart" data-ct-percentage="100" data-ct-middleSpace="95" data-ct-secondColor="#ddd" data-ct-firstColor="#ff9673"></canvas> <span class="h2 ct-graphBox-number"><b>+2K</b></span> </div> <div class="ct-graphBox-content ct-u-paddingTop10"> <h6 class="ct-u-hr ct-u-hr--center text-uppercase text-center ct-fw-bold">happy customers</h6> <p class="text-center"> Aenean tristique, turpis id bla commodo, libero neque rhoncuse turpis, vel malesuada arcu tu. </p> </div> </div> |
Type 2 – Graph Box
Graph Box
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="ct-graphBox ct-graphBox--type2"> <div class="ct-graphBox-graph"> <canvas width="150" height="150" class="ct-js-pieChart" data-ct-percentage="65" data-ct-middleSpace="95" data-ct-secondColor="#fff" data-ct-firstColor="#c25d7b"></canvas> <div class="ct-graphBox-graph-content"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-graphBox-number">95<span>%</span></div> <h6 class="ct-graphBox-title">JAVASCRIPT</h6> </div> </div> </div> </div> </div> |
Remember to include the following scripts to your HTML page, otherwise pie charts won’t work correctly.
|
1 2 |
<script src="../assets/js/charts/Chart.min.js"></script> <script src="../assets/js/charts/init.js"></script> |