Peity 3.2.1 — four SVG types (pie, donut, line, bar). Code samples use theme-aware styling so nothing stays maroon on dark backgrounds.
Peity reads numbers from a <span> and replaces them with SVG. The plugin only ships pie, donut, line, and bar — below are size and color recipes (plus stroke-only line, thin donut, and wide bar).
| Graph | Code |
|---|---|
| 1/5 |
<span class="donut" data-peity='{ "fill": ["#14b8a6", "#e2e8f0"] }'>1/5</span>
|
| 226/360 |
<span class="donut" data-peity='{ "fill": ["#14b8a6", "#e2e8f0"] }'>226/360</span>
|
| 0.52/1.561 |
<span class="donut" data-peity='{ "fill": ["#14b8a6", "#e2e8f0"] }'>0.52/1.561</span>
|
| 1,4 |
<span class="donut" data-peity='{ "fill": ["#14b8a6", "#e2e8f0"] }'>1,4</span>
|
| 226,134 |
<span class="donut" data-peity='{ "fill": ["#14b8a6", "#e2e8f0"] }'>226,134</span>
|
| 0.52,1.041 |
<span class="donut" data-peity='{ "fill": ["#14b8a6", "#e2e8f0"] }'>0.52,1.041</span>
|
| Graph | Code |
|---|---|
| 5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2 |
<span class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span> |
| 5,3,9,6,5,9,7,3,5,2 |
<span class="line">5,3,9,6,5,9,7,3,5,2</span> |
| 5,3,2,-1,-3,-2,2,3,5,2 |
<span class="line">5,3,2,-1,-3,-2,2,3,5,2</span> |
| 0,-3,-6,-4,-5,-4,-7,-3,-5,-2 |
<span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span> |
<span class="bar">5,3,9,6,5,9,7,3,5,2</span> |
|
<span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span> |
| Graph | Code |
|---|---|
<span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span> |
|
<span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span> |
|
<span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span> |
|
| 4,7,6,5 |
<span class="pie-colours-1">4,7,6,5</span> |
| 5,3,9,6,5 |
<span class="pie-colours-2">5,3,9,6,5</span> |