radial-progress-chart

A customizable Radial Progress Chart written on the top of D3.js.

Usage no npm install needed!

<script type="module">
  import radialProgressChart from 'https://cdn.skypack.dev/radial-progress-chart';
</script>

README

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

Features

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

Dependencies

D3.js = ^3.5.0

Demo

Check out project page http://pablomolnar.github.io/radial-progress-chart

Installation

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

Check out project page http://pablomolnar.github.io/radial-progress-chart

API & Usage

Check out project page http://pablomolnar.github.io/radial-progress-chart

Browser Support

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

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    

Publishing

  • Bump version
  • Tag vX.X.X
  • npm version patch
  • spm publish

License

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