Spec Pages

Inline graphs

Peity and sparkline-style micro charts.

Pie Charts Big With custom size.
Graph Code
1/5

<span class="pie" data-peity='{ "fill": ["rgb(26, 179, 148)", "#eeeeee"],"radius": 140 }'>1/5</span>
Donut Chart Big With custom size.
Graph Code
1/5

<span class="pie" data-peity='{ "fill": ["#1ab394", "#eee"],"radius": 140 }'>1/5</span>
Pie Charts Small With custom size.
Graph Code
1/5 <span class="pie">1/5</span>
226/360 <span class="pie">226/360</span>
0.52/1.561 <span class="pie">0.52/1.561</span>
1,4 <span class="pie">1,4</span>
226,134 <span class="pie">226,134</span>
0.52,1.041 <span class="pie">0.52,1.041</span>
Donut Chart Small With custom size.
Graph Code
1/5 <span class="donut" data-peity='{ "fill": ["#1ab394", "#eeeeee"] }'>1/5</span>
226/360 <span class="donut" data-peity='{ "fill": ["#1ab394", "#eeeeee"] }'>226/360</span>
0.52/1.561 <span class="donut" data-peity='{ "fill": ["#1ab394", "#eeeeee"] }'>0.52/1.561</span>
1,4 <span class="donut" data-peity='{ "fill": ["#1ab394", "#eeeeee"] }'>1,4</span>
226,134 <span class="donut" data-peity='{ "fill": ["#1ab394", "#eeeeee"] }'>226,134</span>
0.52,1.041 <span class="donut" data-peity='{ "fill": ["#1ab394", "#eeeeee"] }'>0.52,1.041</span>
Line and Bars Charts
Graph Code
5,3,9,6,5,9,7,3,5,2,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,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>
5,3,9,6,5,9,7,3,5,2 <span class="bar">5,3,9,6,5,9,7,3,5,2</span>
5,3,2,-1,-3,-2,2,3,5,2 <span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span>
Line and Bars Charts - Set Color Dynamically
Graph Code
5,3,9,6,5,9,7,3,5,2 <span class="colours-1">5,3,9,6,5,9,7,3,5,2</span>
5,3,2,-1,-3,-2,2,3,5,2 <span class="bar-colours-2">5,3,9,6,5,9,7,3,5,2</span>
0,-3,-6,-4,-5,-4,-7,-3,-5,-2 <span class="bar-colours-3">5,3,2,-1,-3,-2,2,3,5,2</span>
4,7,6,5 <span class="pie-colours-1">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
5,3,9,6,5 <span class="pie-colours-2">5,3,9,6,5,9,7,3,5,2</span>
All Rights Reserved 2026 - 2030