Circliful: jQuery Circle Statistics Plugin

Circliful is nice and neat plugin which will help you display statistics infos as circular charts. It is based on HTML5 and jQuery and many options can be set as data attributes which makes this plugin easy to use and style. Another great feature is that you can integrate Font Awesome and diplay this lovely icons to create beautiful circular data charts. Here is an explanation of how to use the plugin and data attributes.

If you are looking for other ways to display stats and info you can have a look at Chart.js, which has other options to visualise your data.

Circliful : jQuery Circle Statistic Plugin



Include the JS and CSS Files into your Website

<link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" />

<script src=""></script>
<script src="js/jquery.circliful.min.js"></script>

Add Circles

Filled Circle with text and info-text.

Circliful jQuery Plugin

<div id=”myStat” data-dimension=”250″ data-text=”35%” data-info=”New Clients” data-width=”30″ data-fontsize=”38″ data-percent=”35″ data-fgcolor=”#61a9dc” data-bgcolor=”#eee” data-fill=”#ddd”></div>

Circle only with text.

Circliful jQuery Plugin

<div id=”myStat2″ data-dimension=”350″ data-text=”75%” data-width=”30″ data-fontsize=”38″ data-percent=”75″ data-fgcolor=”#61a9dc” data-bgcolor=”#eee” ></div>

Half Circle – filled with text and info.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

Circliful jQuery Plugin

<div id=”myStathalf” data-dimension=”250″ data-text=”35%” data-info=”New Clients” data-width=”30″ data-fontsize=”38″ data-percent=”35″ data-fgcolor=”#7ea568″ data-bgcolor=”#eee” data-type=”half” data-fill=”#ddd”></div>

Circle – border inline & font awesome icon.

Circliful jQuery Plugin

<div id=”myStat4″ data-dimension=”250″ data-text=”72″ data-info=”New Users” data-width=”30″ data-fontsize=”38″ data-percent=”46″ data-fgcolor=”#61a9dc” data-bgcolor=”#eee” data-total=”150″ data-part=”72″ data-border=”inline” data-icon=”users” data-icon-size=”28″ data-icon-color=”#ccc”></div>

Turn elements into circliful Circles. Add this code to your Site.

$( document ).ready(function() {

Use Fontawesome Icons.

  • Download the Fontawesome Library Fontawesome Website
  • Copy and paste the css file into the css folder (font-awesome.min.css)
  • Copy and paste the fonts folder beside the css folder
  • Include the css file into your site. Code bellow
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>


Available Options

The bellow list shows wich data attributes can be set.

Data Attribute Explanation Values Default
data-dimension Is the height and width of the element Integer 200px on 200px
data-text Will be displayed inside of the circle over the info element Alphanumeric empty
data-info Will be deisplayed inside of the circle bellow the text element (can be empty if you dont want to show info text) Alphanumeric empty
data-width Is the thickness of circle Integer 15px
data-fontsize Is the font size for the text element Integer 15px
data-percent Can be 1 to 100 Integer 50%
data-fgcolor Is the foreground colour of the circle RGB #556b2f
data-bgcolor Is the background color of the cicle RGB #eeeeee
data-fill Is the background color of the whole circle (can be empty if you dont want to set a background to the whole circle) RGB empty
data-type Full or half circle for example data-type=”half” if not set the circle will be a full circle half empty
data-total If you want to display the percentage of a value for example you have 750MB Ram and at the moment are 350MB in use. You need to set data-total=”750″ and data-part=”350″ and the circle will show the percentage value 36,85% Integer empty
data-part See data-total explanation. Integer empty
data-border Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline. inline or outline empty
data-icon Fontawesome icon class. Every Fontawesome Icon without the “fa-” for example not fa-plus just plus.Fontawesome Website – Icons empty
data-icon-size Will set the font size of the icon. Integer empty
data-icon-color Will set the font color of the icon. RGB empty

You may also like...

1 Response

  1. Shruthi says:

    how to edit data attributes? Eg., If I want to change data-fgcolor, how can i change by using javascript or jquery.? Or is there any alternative ways to change attribute values dynamically.

Leave a Reply

Your email address will not be published. Required fields are marked *