About

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

Documentation

Dependencies

• D3.js = ^3.5.0

Browser Support

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

API

Use constructor to create your charts:

var myChart = new RadialProgressChart(bindTo, settings);

Where:

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
myChart.update(75);

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

Contribution

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           

TODOs

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

Examples