A canvas ring for a single value. Every part is an option, and the center is yours to fill.
Or a script tag:
unpkg.com/easy-pie-chart
Three ways in
The core is framework-agnostic. jQuery is an optional second entry point, never a dependency.
import { EasyPieChart } from 'easy-pie-chart'; const chart = new EasyPieChart(el, { barColor: '#ef1e25', }); chart.update(65);
<!-- exposes window.EasyPieChart --> <script src="easypiechart.min.js"> </script> new EasyPieChart(el, { size: 140, }).update(65);
$('.chart').easyPieChart({ barColor: '#10b981', }); $('.chart') .data('easyPieChart') .update(42);
The chart draws the ring only. Position an element over it and update it from
onStep. this.el is the host element.
Live
Every change below is the real library redrawing, and the code is what you would write to get it.
Since 3.1
Reference
Anything except the callbacks can also be set as a data-* attribute, which wins over the options object, so one call can configure many charts.
| Option | Default | Description |
|---|---|---|
| barColor | '#ef1e25' | Color string, canvas gradient/pattern, or (value) => style |
| trackColor | '#f9f9f9' | Track behind the bar, or false |
| trackBorderColor | false | Hairline along both edges of the track |
| fillColor | false | Fills the disc inside the ring |
| scaleColor | '#dfe0e0' | Tick color, or false |
| scaleLength | 5 | Tick length in px |
| scaleCount | 24 | Number of ticks |
| lineCap | 'round' | butt, round or square |
| lineWidth | 3 | Bar width in px |
| trackWidth | lineWidth | Track width in px |
| size | 110 | Square, in px |
| rotate | 0 | Rotation in degrees |
| arcLength | 360 | Sweep in degrees. 180 gives a gauge |
| max | 100 | Value that fills the bar |
| responsive | false | Follow the host element's size |
| canvasClass | 'easy-pie-chart-canvas' | Class on the generated canvas |
| animate | {duration:1000, enabled:true} | A number, false, or a (from,to) => ms duration |
| easing | quadratic | (t,b,c,d); the 2.x five-argument form and jQuery easing names still work |
| onStart / onStep / onStop | none | Bound to the chart, so this.el works |
Reference
| Member | Returns | Description |
|---|---|---|
| update(value) | this | Animate, or jump when animation is off. Ignores NaN |
| setOptions(options) | this | Apply new options and redraw at the current value |
| stop() | this | Halt a running animation at the current frame |
| enableAnimation() / disableAnimation() | this | Toggle animated updates |
| destroy() | void | Cancel animation, remove the canvas, stop observing |
| value | number | Current value |
| options / el | object / element | Resolved options, host element |
| renderer | IRenderer | getCtx() / getCanvas() for gradients |
Upgrading
3.x is a TypeScript rewrite. Existing jQuery and vanilla configurations keep working:
data-* precedence, easing names and the 2.x easing signature are all still honored.
$.fn.easyPieChart, data-percent, every option above,
this.el inside callbacks, and the EasyPieChart global.
The AngularJS 1.x directive, Bower and Meteor packaging, and the IE 7/8 excanvas path. Licensing is MIT only.
A drop-in directive is in the
Readme,
or stay on 2.1.7, which remains on npm.