Simple (but powerful) SVG donut charts with JavaScript (or jQuery)
see a bunch of code examples on CodePen or play on the playground
in your terminal, use one of the following;
yarn add donutty
npm install donutty
bower install donutty
Once you have the package installed in your node_modules/ folder by following the installation above
then you may include the ./dist/ file of choice:
donutty.min.jsdonutty-jquery.min.jsYou may include the javascript directly in to your html files by
using a direct <script> tag;
<script src="/node_modules/donutty/dist/donutty.min.js"></script>
This method is not really ideal for a modern web application, though.
A better way to include donutty is to add it to your vendor bundle, this can be done
many ways with tools such as gulp or webpack. In those scenarios you might want to
use the dist/donutty.js file as the entry point.
There's a couple of ways to configure donutty depending on how you prefer:
html data attributesDOM (html) to configure the options of donutty<!-- this will create a donut chart with a mininum value
of -50, maximum of 50 and a set value of 33 -->
<div id="donut" data-donutty data-min=-50 data-max=50 data-value=33>
</div>
js initialisation// this will create a donut chart on #donut with a minimum value
// of -50, maximum of 50 and a set value of 11
// jquery
var donut = $("#donut").donutty({ min: -50, max: 50, value: 11 });
// or vanilla
var donut = new Donutty( document.getElementById( "donut" ), { min: -50, max: 50, value: 11 });
| option | type | default | description |
|---|---|---|---|
min | Number | 0 | the minimum value the donut can be |
max | Number | 100 | the maximum value of the donut |
value | Number | 50 | the actual value of the donut |
round | Boolean | true | if the edges of the donut are rounded or not |
circle | Boolean | true | does the donut create a complete circle or not |
radius | Number | 50 | the radius of the donut (size, essentially, but can be made auto with css) |
thickness | Number | 10 | how thick the actual donut track is |
padding | Number | 4 | padding between the background (track) and the donut |
bg | String | "rgba(70, 130, 180, 0.15)" | the color of the background (track) |
color | String | "mediumslateblue" | color of the actual donut |
transition | String | ¹ see below | the animation which runs on the donut |
dir | String | "" | a String that can accept "rtl" for right-to-left modes ² see below |
anchor | String | "bottom" | a String that can accept "top" or "bottom" and decides whether the donut starts at the top or the bottom |
text | Function | false ³ see below | a function for returning a text/html String |
title | Function/String | false ⁴ see below | a function for returning a title String |
desc | Function/String | false ⁴ see below | a function for returning a description String |
"all 1.2s cubic-bezier(0.57, 0.13, 0.18, 0.98)"
Check out all the options on CodePen
Donutty will first check the dir option passed in to itself. If it fails to find that
option, the next thing it will do is look for the html attribute dir="rtl" on the
donut container (element passed in as first parameter). And finally if no "rtl" is found
it will check the <html> root element for <html dir="rtl">. If any are found, the donut
will fill in the opposite direction.
false
You may pass a Function to the text option which returns a valid String. this
will append a html string which can be used to visualise the value:
{
text: function( state ) {
return ( state.value / ( state.max - state.min ) * 100 ) + "%";
// return the percentage of the donut
}
}
A default string for <title> and <desc> will be added to the <svg> element. The values
of these strings can be modified either as a static String or as a Function which returns
a String. The Function will have a ( state ) argument available with the value, min and max.
{
title: function( state ) {
return "Donut Chart Graphic";
// return the title of the graphic
},
desc: function( state ) {
return "A donut chart ranging from " + state.min + " to " +
state.max + " with a current value of " + state.value + ".";
// return the description of the graphic
}
}
There are some methods available for updating/changing values on the donut chart after it has been created. These are accessible by creating a reference to the chart in javascript.
// first create the donut chart
var elem = document.getElementById( "donut" );
var chart = new Donutty( elem, { max: 500, value: 100 });
// then lets modify the values
chart.set( "value", 300 ).set( "min", 100 ).set( "max", 300 ).set( "bg", "aquamarine" ).set( "color", "slategrey" );
// or;
chart.setState({ min: 100, max: 300, value: 300, color: "", bg: "aquamarine", color: "slategrey" )
| method | arguments | arg types | description |
|---|---|---|---|
set | property, value | String, Number | Set a property's value (min, max, value) |
setState | newState | Object | Set the values for multiple properties (min, max, value, bg, color) |
As donutty will be responsive and grow to the width of the container,
it may be necessary to add overflow: hidden; to the [data-donutty] wrapper
element so that it doesn't overflow the page due to transform-rotation.
FAQs
Create SVG donut charts with Javascript
The npm package donutty receives a total of 52 weekly downloads. As such, donutty popularity was classified as not popular.
We found that donutty demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.