Circles

Github

The circular graphs with the numerical value in the center have been a great way of visualizing data lately. For example, they are used to great effect by awwwards.

Circles makes creating the charts very easy. Circles is a lightweight JavaScript library without dependencies, that generates the SVG chart on the fly.

Create a graph by calling:

js
Circles.create({
  id:           'circles-1',
  radius:       60,
  value:        43,
  maxValue:     100,
  width:        10,
  text:         function(value){return value + '%';},
  colors:       ['#D3B6C6', '#4B253A'],
  duration:     400,
  wrpClass:     'circles-wrp',
  textClass:    'circles-text',
  styleWrapper: true,
  styleText:    true
})

where

  • id - the DOM element that will hold the graph
  • radius - the radius of the circles
  • value - init value of the circle (optional, defaults to 0)
  • maxValue - maximum value of the circle (optional, defaults to 100)
  • width - the width of the ring (optional, has value 10, 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's duration; defaults to 500; if 0 or null is passed, the animation will not run
  • wrpClass - class name to apply on the generated element wrapping the whole circle
  • textClass - class name to apply on the generated element wrapping the text content
  • styleWrapper - whether or not to add inline styles to the wrapper element (defaults to true)
  • styleText - whether or not to add inline styles to the text (defaults to true)
  • text - the text to display at the center of the graph (optional, the current "htmlified" value will be shown); if null or an empty string, no text will be displayed; it can also be a function: the returned value will be the displayed text

API

js
myCircle.updateRadius(Number radius)

Regenerates the circle with the given radius.

js
myCircle.updateWidth(Number width)

Regenerates the circle with the given width.

js
myCircle.updateColors(Array colors)

Change colors used to draw the circle.

js
myCircle.update(Number value [, Number duration])

Set the value of the circle to value. Animation will take duration ms to execute. If no duration is given, the default duration set in the constructor will be used. If you don't want animation, set duration to 0.

js
myCircle.getPercent()

Returns the percentage value of the circle, based on its current value and its max value.

Styles

The styles have been specified inline to avoid external dependencies, but they can be overridden via CSS easily, being simply HTML elements. Two classes are exposed for this: circles-wrp (the element wrapping the whole circle) and circles-text (the element wrapping the text content). You can overwrite these classes by sending properties wrpClass and/or textClass to the constructor.

Compatibility

Browsers that support SVG.

Inspirations

Code and ideas have been borrowed from Highcharts and Wout Fierens's svg.js.