pizza

by zurb

zurb /pizza

Better pie, donut, line, and bar graphs.

419 Stars 67 Forks Last release: over 6 years ago (v0.2.1) MIT License 125 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Pizza Pie Charts

Pizza is a responsive pie, donut, bar, and line graph charting library based on the Snap SVG framework from Adobe. It focuses on easy integration via HTML markup and CSS instead of JavaScript objects, although you can pass JavaScript objects to Pizza as well.

Implementation

The first step is to create a key with a

ul
and list elements that represent each piece of the pie with a
data-pie-id
attribute pointing to the ID of your chart container.
  • Water Buffalo (60)
  • Bison (20)
  • Sheep (12)
  • Goat (32)
  • Shetland Pony (50)

After you have created your legend, you can include your chart container anywhere on the page.

You can then style your chart with CSS or SCSS.

To initialize your charts, you can call

Pizza.init();
at the end of the body of your page.

Data Options

You can pass options to the chart by using the

data-options
attribute on your legend:

    Or on initialization:

Pizza.init('#myChart', {
  data: [23, 44, 1, 29, 90]
});

Custom Text

Setting

data-text
on your
li
allows you to override the default percent for pie piece labels. You have access to
value
and
percent
as variables. All variables are wrapped in handlebar.js style double brackets.
  • Goat (32)
  • Will render out

    Goats 19% (32 total)
    for example.

    Contributing

    To contribute you must have Node and Grunt installed on your system.

    Compiling:

    npm install
    bower install
    grunt
    

    We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.