Animated Circle Statistics Plugin With jQuery and Canvas - Circliful

Animated Circle Statistics Plugin With jQuery and Canvas - Circliful
File Size: 468 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Circliful is a jQuery chart plugin that animates the presentation of your information with good looking circular design, a little similar to the ring chart. Also can be used as a circular timer, progress/loading indicator, pie chart and so on. 

Basic Usage:

1. Create a DIV container for the plugin. You can pass options to the chart by using the data-* attribute , or by passing them in on initialization.

<div id="demo" 
data-info="New Clients" 

2. Load the jQuery javascript library and jQuery Circliful plugin at the end of the page.

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

3. Initialize the plugin.

$( document ).ready(function() {

4. Default settings.


  // foreground Color
  foregroundColor: "#3498DB",

  // backgroun color
  backgroundColor: "#eee",

  // fill color of point circle
  pointColor: "none",

  // fill color
  fillColor: 'none',

  // width of foreground circle border
  foregroundBorderWidth: 15,

  // width of background circle border
  backgroundBorderWidth: 15,

  // Size of point circle
  pointSize: 28.5,

  // font color
  fontColor: '#aaa',

  // from 0 to 100
  beforePercent: '',

  // from 0 to 100
  percent: 75,

  // if the circle should be animated initialy
  animation: 1,

  // how fast or slow the animation should be
  // from 0 to 100
  animationStep: 5,

  // font awesome icon classes
  icon: 'none',

  // icon size
  iconSize: '20px',

  // icon color
  iconColor: '#999',

  // top, bottom, left, right or middle
  iconPosition: 'top',

  // icon decoration
  iconDecoration: true,

  // target percentage
  target: 0,

  // star percentage
  start: 0,

  // show percent
  showPercent: 1,

  // font size of the percentage text
  percentageTextSize: 22,

  // horizontal position of the percentage text
  percentageX: 100,

  // vertical position of the percentage text
  percentageY: 113,

  // additonal css for the percentage text
  textAdditionalCss: '',

  // draws a circle around the main circle
  targetPercent: 0,

  // font size of the target percentage 
  targetTextSize: 17,

  // fill color of the target circle
  targetColor: '#2980B9',

  // info text shown bellow the percentage in the circle  
  text: null,

  // css inline style you wanna add to your info text
  textStyle: null,

  // font color of the info text
  textColor: '#666',

  // vertical position of your info text
  textY: null,

  //  horizontal position of your info text
  textX: null,

  // turns multiple bars on if set to 1
  multiPercentage: 0,

  // array of percent, color and title for each circle
  percentages: [],

  // aligns string of "text" property centered below the circle 
  textBelow: false,

  // to hide the percentage sign
  noPercentageSign: false,

  // replace the percentage shown in the circle by text
  replacePercentageByText: null,

  // draw half circle see example bellow
  halfCircle: false,

  // animate circle on scroll into view
  animateInView: false,

  // number of decimal places to show
  decimals: 0,

  // shows decimals while animating instead of only at the end or if less than 1
  alwaysDecimals: false,

  // title of the circle
  title: 'Circle Chart',

  // description of the circle
  description: '',

  // color of progress
  progressColor: null,

  // used shape at the end
  // or 'round'
  strokeLinecap: 'butt'



  • Added option for displaying rounded ends


  • Fix invalid percentage after animate circle. In animate function, while non multiple percentages, the percentage variable is declared in invalidly scope and results in undefined.


  • epmty the icon-string variable if no icon is specified, to supress "undefined" strings in SVG-Output.


  • Fix percenatge progress wrong number bug


  • added iconDecoration option


  • fixed animation for multiple bars


  • change color of the circle according to the percentage


  • Fixed: textBelow doesn't work


  • Accessibility improvements


  • readded assign settings by data attributes


  • Allowing for separate styling of number and percent sign


  • Added settings to show decimals in percentage text


  • v1.0.2
  • Fixed half round chart is missing in new version 1.0.0
  • Animation on scroll into view


  • textBelow property added


  • added point circle


  • changed circliful from canvas to svg
  • API update.
  • Added more options.


  • Fixed bu on target param of isAllowed callback.Moved `bgrCircle()` inside `animate()` so that clearRect()` prevents distortion/pixelation of the foreground circle


  • Fixed Circle fill color cannot be set without using data attribute


  • added font awesome v4.1.0
  • added border inline/outline option again

0.1.5 (2014-01-24)

  • Add animation-step option


This awesome jQuery plugin is developed by pguso. For more Advanced Usages, please check the demo page or visit the official website.