A very lightweight, pure SVG pie chart
In Ember 2.2.x or lower, install the hash
helper polyfill:
ember install ember-hash-helper-polyfill
ember install ember-svg-pie
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 omitcolor
, 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, default100
) -- 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, default0
) -- stroke width in px.fluid
(boolean, defaultfalse
) -- whether the SVG should stretch, i. e. behave like an<img>
withwidth: 100%, height: auto
. Default size should be overridden by CSS.
See demo for code samples and results!
This addon provides the svg-pie-array
helper which acts similar to the hash helper introduced in Ember 2.3.
Use it to quickly build an array in your template: