Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ember-svg-pie

A very lightweight, pure SVG pie chart

Travis npm npm Ember Observer Score

Requirements

In Ember 2.2.x or lower, install the hash helper polyfill:

ember install ember-hash-helper-polyfill

Installation

ember install ember-svg-pie

Usage

Use the {{svg-pie}} component with the following arguments:

  • data (array or object, required) -- a sector or array of sectors that represent the data do plot. Each sector is an object with the following key-value pairs:
    • value (number, required) -- value of this sector.
    • color (string, optional) -- fill color for the sector.
    • class (string, optional) -- HTML class to apply to the sector. If you omit color, you can use this HTML class to color the sector with .class {fill: deeppink}.
  • total (number, optional) -- the overall value. Useful if you want to display a partial circle. If omitted, a sum of all sector values is used as a total.
  • size (number, default 100) -- the width and height of the SVG in px.
  • startAngle (number, default -90 aka 12 o'clock) -- the start angle of the first sector in degrees. 0 corresponds to three o'clock.
  • stroke (string, optional) -- color of the sectors' outline.
  • strokeWidth (number, default 0) -- stroke width in px.
  • fluid (boolean, default false) -- whether the SVG should stretch, i. e. behave like an <img> with width: 100%, height: auto. Default size should be overridden by CSS.

See demo for code samples and results!

Bonus array helper

This addon provides the array helper which acts similar to the hash helper introduced in Ember 2.3.

Use it to quickly build an array in your template:

<ul>
  {{#each (array 'foo' 'bar' 'baz') as |item|}}
    <li>{{item}}</li>
  {{/each}}
</ul>

About

A very lightweight, pure SVG pie chart

Resources

License

Stars

Watchers

Forks

Packages

No packages published