Create SVG Donut Charts With JavaScript/jQuery | donutty

Donutty is a JavaScript / jQuery layout library that allows you to create seamlessly animated and fully scalable Donut / Pie / Ring Charts/Diagrams or circular/radial progress bars using SVG and CSS3 animations.

It also comes with a Vanilla JavaScript version that allows you to implement the graphic library without any third dependencies.

Animated Ring Donut Graph jQuery Plugin with D3.js

How to make use of it:

Install & download:

# Yarn
$ yarn add donutty

$ npm install donutty --save

1. Load the newest jQuery and the JavaScript file ‘donutty-jquery.js’ within the doc.

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

2. To create a default chart, simply add the ‘data-donutty’ attribute to the placeholder component and complete.

<div data-donutty></div>

3. Or name the perform on the placeholder component:

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

4. Customize the chart by way of data-OPTION attributes or bypassing the choices to the donutty() technique as follows:

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

5. All default configuration choices.

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. Customize the text displayed within the chart utilizing the text perform.

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

      text: function( state ) {
        return ( state.value / ( state.max - state.min ) * 100 ) + "%";
        // return the percentage of the donut

7. Update the choices/values/stats of the chart.

// min, max, value
myChart.set( "value", 60 )

// min, max, value, bg, color, etc
  options here

Animated Donut/Pie/Ring Charts, donutty Plugin/Github, svg donut chart generator, pie chart svg download

See Demo And Download

Official Website(simeydotme): Click Here

This superior jQuery/javascript plugin is developed by simeydotme. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…