Setting up Easy pie chart

Setting up Easy pie chart

The easy pie chart is a javascript library, that provides the functionality to create charts easily.
There are lots of options to manage our chart. Here we create this beautiful looking chart using an easy pie chart library.
Just follow the code below and add it to your code. To make changes as per your needs, it is totally customizable.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 text-center mb-3">
            <div class="chart margin-70px-bottom" data-line-width="6" data-percent="73" data-track-color="#232323"
                data-start-color="#9D50BB" data-end-color="#6E48AA"><span class="percent text-white"></span></div>
        </div>
        <div class="col-md-3 text-center mb-3">
            <div class="chart margin-70px-bottom" data-line-width="8" data-percent="68" data-track-color="#232323"
                data-start-color="#4776E6" data-end-color="#8E54E9"><span class="percent text-white"></span></div>
        </div>
        <div class="col-md-3 text-center mb-5">
            <div class="chart margin-70px-bottom" data-line-width="12" data-percent="82" data-track-color="#232323"
                data-start-color="#FF512F" data-end-color="#DD2476"><span class="percent text-white"></span></div>
        </div>
        <div class="col-md-3 text-center mb-3">
            <div class="chart margin-70px-bottom" data-line-width="15" data-percent="66" data-start-color="#AA076B"
                data-end-color="#61045F"><span class="percent text-white"></span></div>
        </div>
        <div class="col-md-3 text-center">
            <div class="chart" data-line-width="6" data-percent="91" data-track-color="#333" data-bar-color="#fff"><span
                    class="percent" style="color: #9D50BB"></span></div>
        </div>
        <div class="col-md-3 text-center">
            <div class="chart" data-line-width="8" data-percent="77" data-track-color="#333" data-bar-color="#aaa"><span
                    class="percent" style="color: #4776E6"></span></div>
        </div>
        <div class="col-md-3 text-center">
            <div class="chart" data-line-width="12" data-percent="68" data-track-color="#333" data-bar-color="#999">
                <span class="percent" style="color: #FF512F"></span></div>
        </div>
        <div class="col-md-3 text-center">
            <div class="chart" data-line-width="15" data-percent="72" data-track-color="#333" data-bar-color="#666">
                <span class="percent" style="color: #AA076B"></span></div>
        </div>
    </div>
</div>
body{ background: #000; padding: 50px; display: flex; align-items:center; min-height:100vh }
.chart { position: relative; width: auto;
    display: inline-block;}
.percent { position: absolute; top: 50%; left: 50%; font-size:36px; transform: translate(-50%, -50%); }
$(document).ready(function(){
    if ($('.chart').length) {
        var color1, color2;
        $('.chart').easyPieChart({
            trackColor: '#232323',
            scaleColor: "",
            easing: 'easeOutBounce',
            lineCap: 'round',
            lineWidth: 10,
            size: 300,
            barColor: function () {
                color1 = $(this.el).attr('data-start-color') || $(this.el).attr('data-bar-color') || "#000";
                color2 = $(this.el).attr('data-end-color') || $(this.el).attr('data-bar-color') || "#000";
                var ctx = this.renderer.getCtx();
                var canvas = this.renderer.getCanvas();
                var gradient = ctx.createLinearGradient(0, canvas.width, canvas.width, 0);
                gradient.addColorStop(0, color1);
                gradient.addColorStop(1, color2);
                return gradient;
            },
            animate: {
                duration: 2000,
                enabled: true
            },
            onStep: function (from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent) + "%");
            }
        });
    }
});

Leave a Reply