Loading. Please Wait.

Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple <svg> mini pie donut line or bar chart and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari.

Pie Charts

You can also pass delimiter , fill , height , radius and width options. Passing a radius will set the correct width and height, the pie will always be a circle that fits the available space.

Examples

Color Layout
Primary 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Info 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Success 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Warning 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Danger 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Donut Charts

Donut charts are the same as pie charts and take the same options with an added innerRadius option which defaults to half the radius..

Examples

Color Layout
Primary 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Info 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Success 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Warning 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Danger 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041
Line Charts

Line charts work on a comma-separated list of digits. Line charts can take the following options: delimiter, fill, height, max, min, stroke, strokeWidth and width.

Examples

Color Layout
Primary 5,3,9,6,5,9,7,3,5,2
Info 5,3,2,-1,-3,-2,2,3,5,2
Success 0,-3,-6,-4,-5,-4,-7,-3,-5,-2
Warning 5,3,9,6,5,9,7,3,5,2
Danger 5,3,2,-1,-3,-2,2,3,5,2
Bar Charts

Bar charts work in the same way as line charts and take the following options: delimiter, fill, height, max, min, padding and width

Examples

Color Layout
Primary 5,3,9,6,5,9,7,3,5,2
Info 5,3,2,-1,-3,-2,2,3,5,2
Success 0,-3,-6,-4,-5,-4,-7,-3,-5,-2
Warning 5,3,9,6,5,9,7,3,5,2
Danger 5,3,2,-1,-3,-2,2,3,5,2
data-* attributes

Data attributes can be used to pass custom settings per-chart - options explicitly passed to the peity() function take precedence over data-* attributes.

Examples

1/7 2/7 3/7 4/7 5/7 6/7 7/7

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar