A customizable Radial Progress Chart.


Radial Progress Chart started as a weekend project. It's written on the top of D3.js and was heavily inspired by Apple Watch Activity and D3 stub of Polar Clock.

I tried to make it highly customizable for serve multiple purposes. Some of the features available are:

  • Add many progress rings as you want
  • Place static or dynamic text in the center
  • Customize diameter, stroke width, gap, colors
  • CSS customizable
  • Chart data can be update
  • 275 bytes minified & gzipped

Getting Started

Download the latest version from Github or use your favorite package manager to include it in your project.

npm install radial-progress-chart
bower install radial-progress-chart
component install pablomolnar/radial-progress-chart
spm install radial-progress-chart

Don't forget to load D3.js dependecy before in your HTML. Then use the RadialProgressChart object to instance charts in this way:

new RadialProgressChart('.container', {series: [24, 85]});

There you go! Make sure to check out the API and examples to know the different ways to customize and use the chart.



  • D3.js = ^3.5.0

Browser Support

  • Modern browsers (Chrome, Firefox, Safari, Opera, iOS, Android)
  • IE9+


Use constructor to create your charts:

var myChart = new RadialProgressChart(bindTo, settings);


bindTo: dom element, d3 element or query selector (required)
settings: object (required). Format:

    diameter: int (internal diamenter, default: 100),
    stroke: {
        width: int (default: 40),
        gap: int (default: 2)
    shadow: {
        width: int (default: 4)
    animation: {
        duration: int (default: 1750),
        delay: int (between each ring, default: 200)
    min: int (default: 0),
    max: int (default: 100),
    round: boolean (default: true),
    // array of numbers
    series: [10, 15, 5],
    // or array of objects
    series: [
            value: int (required)

            // color object (optional)
            color: {
                solid: '#fe08b5',
                background: 'red'

            // or interpolate between two colors
            color: {
                interpolate: ['#000000', '#ff0000'],
                background: 'red'

            // or use a gradient object (check out svg gradient specs)
            color: {
                radialGradient: {cx: '60', cy: '60', r: '50'},
                stops: [
                  {offset: '0%', 'stop-color': '#fe08b5', 'stop-opacity': 1},
                  {offset: '100%', 'stop-color': '#ff1410', 'stop-opacity': 1}

            // if specifying a background is not necessary you can use these shortcuts
            color: '#fe08b5'
            color: ['#000000', '#ff0000']

    // simple center text
    center: string (default: "")

    // or function which returns a string
    center: function(value, index, item){}

    // Need multilines? Use an array of mixed strings/functions, each element is a new line
    center: ['foo bar', function(value, index, item){ ... }, ...]

    // if positioning is needed use this format
    center: {
        content: string/function/array,
        y: int (default: 0),
        x: int (default: 0)

Once chart is created you can use update() function to update values:

// one ring shortcut

// multiple rings
myChart.update([35, 45]);
myChart.update([{value: 35}, {value: 45}]);
myChart.update({series:[{value: 35}, {value: 45}]);


Sure, pull request are welcome. Build the project locally using the following steps:
npm install
npm run-script build

Remember to test and hint your code with:
npm test
npm run-script hint           


  • Tooltips
  • Events
  • Customize diameter, stroke width, gap, colors
  • Labels
  • Add more css classes
  • More animations
  • ...


1. Week Activity

Javascript disabled? See the Pen Radial Progress Chart - Week Activity on CodePen.

2. Calories and GPA

Javascript disabled? See the Pen Radial Progress Chart - Calories and GPA on CodePen.

3. Progress

Javascript disabled? See the Pen Radial Progress Chart - Progress on CodePen.


This library is free and open source software, distributed under the MIT License.
Copyright © 2015 Pablo Molnar;

Theme based on Start Bootstrap - Grayscale