Creating Animated Circle Graphs with Circles.js and SVG

Category: Chart & Graph , Javascript | June 11, 2018
Author:lugolabs
Views Total:3,226 views
Official Page:Go to website
Last Update:June 11, 2018
License:MIT

Preview:

Creating Animated Circle Graphs with Circles.js and SVG

Description:

Circles.js is a lightweight and easy javascript library that make it easy to draw an animated circle graph in SVG with percentage display on your web page. Also can be used as a progress bar & loading bar.

Basic Usage:

Make sure to include circles.js script on your web page. The best practice is to load it at the bottom of your page to reduce the page load time.

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

Create a container for the circular graph.

<div id="canvas">
<div class="circle" id="circles-1"></div>
</div>

Call Circles.create with the following options

Circles.create({
    id:         'circles-1',
    percentage: 43,
    radius:     60,
    width:      10,
    number:     7.13,
    text:       '%',
    colors:     ['#D3B6C6', '#4B253A'],
    duration:   400
})

All the options.

  • id – the DOM element that will hold the graph
  • percentage – the percentage dictating the smaller circle
  • radius – the radius of the circles
  • width – the width of the ring (optional, has value 10, if not specified)
  • number – the number to display at the centre of the graph (optional, the percentage will show if not specified)
  • text – the text to display after the number (optional, nothing will show if not specified)
  • colors – an array of colors, with the first item coloring the full circle (optional, it will be `[‘#EEE’, ‘#F00’]` if not specified)
  • duration – value in ms of animation duration; (optional, defaults to 500); if `null` is passed, the animation will not run

Changelog:

06/11/2018

  • Set the internal value to a very small number to allow for zero values

You Might Be Interested In:


One thought on “Creating Animated Circle Graphs with Circles.js and SVG

Leave a Reply