Easy Pie chart

HTML

<script src="https://rawgithub.com/rendro/easy-pie-chart/master/dist/jquery.easypiechart.js"></script>
	<span class="chart" data-percent="86">
		<span class="percent">123</span>
	</span>


<button onclick="redraw()">Redraw</button>

CSS

.chart {position:relative;display:inline-block;width:110px;height:110px;text-align:center;color:#fff;}
.chart canvas {position: absolute;top: 0;left: 0;z-index:0 !important;width:110px;height:110px;}
.percent {display: inline-block;line-height: 110px;z-index: 2; font-size:2em; color:#1abc9c;}

JavaScript

$('.chart').easyPieChart({
    easing: 'easeOutCirc',
    barColor: '#1abc9c  ',
    trackColor: '#f9f9f9  ',
    scaleColor:false,
    scaleLength: 5,
    percent:67,
    lineCap: 'round',
    lineWidth: 15, 
    size: 110, 
    animate: {duration: 2000,enabled: true},
    onStep: function(from, to, percent) {$(this.el).find('.percent').text(Math.round(percent));}
  });

function redraw(){
   $('.chart').empty().easyPieChart({
    easing: 'easeOutCirc',
    barColor: '#1abc9c  ',
    trackColor: '#f9f9f9  ',
    scaleColor:false,
    scaleLength: 5,
    percent:67,
    lineCap: 'round',
    lineWidth: 15, 
    size: 50, 
    animate: {duration: 2000,enabled: true},
    onStep: function(from, to, percent) {$(this.el).find('.percent').text(Math.round(percent));}
  });   
}