Animated Donut/Pie/Ring Charts With jQuery And SVG - Donutty

Animated Donut/Pie/Ring Charts With jQuery And SVG - Donutty

Donutty is a JavaScript/jQuery charting library which lets you generate smoothly animated, fully scalable Donut/Pie/Ring Charts or Circular/Radial progressbars using SVG and CSS3 animations.

Also comes with a vanilla JavaScript version which allows you to implement the charting library without any 3rd dependencies.

1. Load the latest jQuery (slim build) and the JavaScript file 'donutty-jquery.js' in the document.

<script src="" 
<script src="dist/donutty-jquery.js"></script>

2. To create a default chart, just add the 'data-donutty' attribute to the placeholder element and done.

<div data-donutty></div>

3. Or call the function on the placeholder element:

const myChart = $("#example").donutty({
      // options here

4. Customize the chart via data-OPTION attributes or by passing the options to the donutty() method as follows:

<div data-donutty 
// or
const myChart = $("#example").donutty({
      min: -100, 
      max: 100, 
      value: 50

5. All default configuration options.

const myChart = $("#example").donutty({
      // min/max values
      min: 0,
      max: 100,
      // current value
      value: 50,
      // rounded edges or not
      round: true,
      // complete circle or not
      circle: true,
      // padding in pixels
      padding: 4,
      // radius in pixels
      radius: 50,
      // thickness in pixels
      thickness: 10,
      // background color
      bg: "rgba(70, 130, 180, 0.15)",
      // bar color
      color: "mediumslateblue",
      // transition effect
      transition: "all 1.2s cubic-bezier(0.57, 0.13, 0.18, 0.98)"

6. Update the options/values/stats of the chart.

// min, max, value
myChart.set( "value", 60 )
// min, max, value, bg, color, etc
  options here

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

  • Publication date: 16.07.2018
  • Source