Eli Van Rock Eli Van Rock - 5 months ago 42
CSS Question

Easy Pie Charts - Why there's no numbers running animation

I have an issue with Rendro Easy Pie Chart version 2.1.6.

I've used the easy-pie-chart exact as the documents and it shows
the animation of the bars itself until getting to the right percentage.

Let's say its 45%.
The issue is that the easy pie chart is only running an animation on the bar itself and unfortunately the number is not running from 0 to 45%.

Here's my code snippet:

HTML:



<div class='circular-bar circular-bar-xs m-none mt-xs mr-md pull-right'>
<div class='chart circular-bar-chart circular-bar-container' data-percent='45'>
<label class='circular-bar-percentage-text'><span class='percent'>45</span>%</label>
</div>
</div>


CSS:



.circular-bar {
margin-bottom: 25px;
}

.circular-bar .circular-bar-chart {
position: relative;
}

.circular-bar strong {
display: block;
font-weight: 600;
font-size: 18px;
line-height: 30px;
position: absolute;
top: 35%;
width: 80%;
left: 10%;
text-align: center;
}

.circular-bar label {
display: block;
font-weight: 100;
font-size: 17px;
line-height: 20px;
position: absolute;
top: 50%;
width: 80%;
left: 10%;
text-align: center;
}


JS:



$('.circular-bar-chart').easyPieChart({
barColor: "#2baab1",
delay: 300,
size: 45,
lineWidth: 4,
trackColor: '#f2f2f2',
scaleColor: false,
scaleLength: 5,
rotate: 0,
animate: 1600,
onStart: $.noop,
onStop: $.noop
});


Here's the link of how it looks:
https://jsfiddle.net/6455nw8t/

How to solve the issue of the running number from 0 to 45% ?

Thanks in Advance!

Answer

You will have to add onStep parameter.

 $('.circular-bar-chart').easyPieChart({
            barColor: "#2baab1",
            delay: 300,
            size: 45,
            lineWidth: 4,
            trackColor: '#f2f2f2',
            scaleColor: false,
            scaleLength: 5,
            rotate: 0,
            animate: 1600,
            onStart: $.noop,
            onStop: $.noop,
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        });
Comments