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

Show/Hide Fixed

Header Layout

Show/Hide

Sidebar Options

Show/Hide
Fixed Aside

Content View

Footer Options

Show/Hide Fixed

Main Color

Primary
Info
Success
Warning
Danger

Navbar

Dark
Light
Like Main Color

Sidebar

Dark
Light
Like Main Color