Minimal HTML5 Donut Chart Plugin For jQuery - DonutWidget

File Size: 18.2 KB
Views Total: 9650
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal HTML5 Donut Chart Plugin For jQuery - DonutWidget

DonutWidget is a simple plain jQuery plugin to present your data (e.g. progress percentage) in a doughnut/ring chart that is fully configurable via HTML data attributes. Ideal for circular progress and loading indicators.

How to use it:

1. Include the latest version of jQuery library (slim build) and the jQuery DonutWidget plugin's files on the web page.

<link rel="stylesheet" href="jquery.DonutWidget.min.css">
<script src="" 
<script src="jquery.DonutWidget.min.js"></script>

2. Add the donut-widget class to the chart container and config the chart with the following data attributes:

  • data-chart-size: The size of the donut chart. Available values: tiny, normal, large, jumbo, giant.
  • data-chart-max: The max value.
  • data-chart-value: Current value.
  • data-chart-primary: Primary color.
  • data-chart-background: Background color.
  • data-chart-text: Percentage text.
  • data-chart-caption: Chart caption.
<div class="donut-widget" 
     data-chart-caption="Large size">

3. Convert the DIV container into a donut chart.


4. You can also generate & customize the donut chart with JavaScript.

<div class="example"></div>

  // these are default options
  max: 100, 
  value: 0, 
  text: "", 
  rotate: 0, 
  caption: "", 
  template: [
    '<div class="donut-hole"><span class="donut-filling"></div>', 
    '<div class="donut-bite" data-segment-index="0"></div>', 
    '<div class="donut-bite" data-segment-index="1"></div>', 
    '<div class="donut-caption-wrapper"><span class="donut-caption"></span></div>'
  colors: {
    primary: "#ffe600",
    background: "#eee"
  size: "normal"

Change log:


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