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

Question

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 1

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));
            }
        });