Circles


Circles

Circles

Lightwheight JavaScript library that generates circular graphs in SVG. Now with animation.

Usage

Include the circles.js file in your HTML file. There are no dependencies.

Create a graph by calling:

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

where

Styles

The styles have been specified inline to avoid external dependencies. But they can be overriden via CSS easily, being simply HTML elements.

To help with this, a few CSS classes have been exposed:

Compatibility

Browsers that support SVG.

Desktop

Mobile

Inspirations

Code and ideas borrowed by:

Licence

Circles is licensed under the terms of the MIT License.

Changelog