Highly Customizable HTML5 Ring Chart Plugin - circleChart

circleChart is a jQuery plugin which helps you draw animated, highly customizable, circle-style ring charts on the HTML5 canvas element. Also can be used as a circular progress bar to represent the loading progress.

Key features:

• Fully styleable in the JavaScript.
• Dead simple to use.
• Text in the ring chart.
• Smooth animations.
• Configurable animation speed.
• Supports both counterclockwise and clockwise.
• Allows to specify the start angle.

Basic usage:

1. To use this plugin, you need to load both the latest version of jQuery (slim build) and the circleChart.js script in the html page.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="src/circleChart.js"></script>

2. Create a DIV container where the ring chart should be placed on.

<div class="circleChart" id="demo"></div>

3. Draw a basic ring chart inside the DIV container you created.

$("#demo").circleChart();

4. Style & customize the ring chart to your taste.

$("#demo").circleChart({
  color: "#3459eb",
  backgroundColor: "#e6e6e6",
  background: true,
  speed: 2000,
  widthRatio: 0.2,
  value: 66,
  unit: 'percent',
  counterclockwise: false,
  size: 110,
  startAngle: 0,
  animate: true,
  backgroundFix: true,
  lineCap: "round", // butt, round, square
  animation: "easeInOutCubic", // linearTween, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
  text: 0 + '%',
  redraw: false,
  cAngle: 0.1,
  textCenter: false,
  textSize: false,
  relativeTextSize: 1 / 7,
  autoCss: true,
  onDraw: function(){}
});

Change log:

2017-08-23

• v2.3.1: update

2017-06-07

• v02.2: bugfixes

2017-05-14

• v02: bugfixes

2017-02-19

• v01 features and bugfixes

---

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