Skip to content
A very lightweight, pure SVG pie chart
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.node-version
.npmignore
.travis.yml
.watchmanconfig
CHANGELOG.md
LICENSE.md
README.md
bower.json
ember-cli-build.js
index.js
package.json
testem.js
testem.json

README.md

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>
You can’t perform that action at this time.