Javascript examples for Chart.js:Pie Chart
Create an inner border of a donut pie chart
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> <script type="text/javascript" src="https://rendro.github.io/easy-pie-chart/javascripts/jquery.easy-pie-chart.js"></script> <link rel="stylesheet" type="text/css" href="https://rendro.github.io/easy-pie-chart/stylesheets/jquery.easy-pie-chart.css"> <style id="compiled-css" type="text/css"> .pie{/*from w ww . ja v a 2 s. c o m*/ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:70px; height:70px; border-radius:50%; } .easyPieChart *::before { border: 1px solid black; border-radius: 50%; bottom: 9px; content: " "; display: block; left: 8px; position: absolute; top: 10px; width: 83%; z-index: 99; } </style> <script type="text/javascript"> $(window).load(function(){ $(function() { $('.pie').easyPieChart({ //Configuration goes here barColor: '#62ae41', scaleColor: false, lineWidth: 10, trackWidth: 10, animate: false, lineCap: 'square' }); }); }); </script> </head> <body> <div class="pie" data-percent="90"> <span>6</span> </div> </body> </html>