Creating A Flexible Flat Donut Chart with JavaScript and SVG – circleDonutChart

Category: Chart & Graph , Javascript | November 19, 2018
Views Total:4,088 views
Official Page:Go to website
Last Update:November 19, 2018


Creating A Flexible Flat Donut Chart with JavaScript and SVG – circleDonutChart


circleDonutChart is a standalone JS library for drawing animated, flexible and flat styled donut charts using SVG objects.

How to use it:

Load the necessary circleDonutChart.js in your document.

<script src="circleDonutChart.js"></script>

Create a DIV element into which the SVG based donut chart will be created.

<div id="example"></div>

Draw an animated donut chart into the DIV element.

var circle = new circleDonutChart('example');
titleText:"Your happiness", 

Available drawing options.

  • start: starting value, ignored if chart already has a status
  • end: ending value [mandatory]
  • outerCircleColor: ovverrides the color of outer circle
  • innerCircleColor: ovverrides the color of inner circle
  • textColor: ovverrides the color of text
  • animationSpeed = 0: no Animation
  • animationSpeed = 1: normal speed
  • scaling: scaling value, 1 for normal
  • size: in px, the size of the chart
  • getValue(): gets actual value
  • setValue(): sets a value without animation
  • unitText: sets the unit for the shown number
  • maxValue: optional parameter that overrides 100% with a maximal Value
  • titleText: A title for the Chart (less than 12 chars for inner-bottom and inner-top readibility)
  • titlePosition: where the title gets displayed, [“outer-bottom” | “outer-top” | “inner-bottom” | “inner-top”]
  • titleColor: ovverrides the standard colors for the title
  • angleOfStart: the standard starting position is at 3 o’clock (90 degrees)- the value can be overridden. Values are from 0 to 360


  • draw: draws the chart based on the given options
  • draw (after first draw): omitting color options possible
  • setValue: sets a value, without animating the circle
  • getValue: returns the actual value
  • delete: delete the chart object
  • reload: reload the chart object and initialize with standard parameters



  • Added support for custom starting angles

You Might Be Interested In:

3 thoughts on “Creating A Flexible Flat Donut Chart with JavaScript and SVG – circleDonutChart

    1. vneri

      Hi sorry for my late response, didn’t know my chart was featured here. I could give it a look or if you want you can branch it on GitHub – unfortunately I didn’t have time to continue to improve it

  1. JJ Spelman

    Thanks for this!! Was looking for a simple animated donut chart for a web page.


Leave a Reply