Line Charts

Bar Chart

Pie Chart

Custom Line Chart

Mouse Speed Chart Example

Composite bar Chart

Jquery Knob

Disable display input
Cursor mode
Display previous value
Angle offset and arc
Angle offset
5-digit values, step 1000
Readonly
Angle offset and arc

Circliful Charts

Pie Charts

Graph Code
1/5 <span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1/5</span>
226/360 <span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">226/360</span>
0.52/1.561 <span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">0.52/1.561</span>
1,4 <span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1,4</span>
226,134 <span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">226,134</span>
0.52,1.041 <span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">0.52,1.041</span>

Donut Charts

Graph Code
1/5 <span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1/5</span>
226/360 <span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">226/360</span>
0.52/1.561 <span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">0.52/1.561</span>
1,4 <span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1/4</span>
226,134 <span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">226,134</span>
1,2,3,2,2 <span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1,2,3,2,2</span>

Line and Bars Charts

Graph Code
5,3,9,6,5,9,7,3,5,2 <span data-plugin="peity-line" data-fill="#71b6f9" data-stroke="#169c81" data-width="100" data-height="40">5,3,9,6,5,9,7,3,5,2</span>
5,3,2,-1,-3,-2,2,3,5,2 <span data-plugin="peity-line" data-fill="#71b6f9" data-stroke="#169c81" data-width="100" data-height="100">5,3,2,-1,-3,-2,2,3,5,2</span>
0,-3,-6,-4,-5,-4,-7,-3,-5,-2 <span data-plugin="peity-line" data-fill="#71b6f9" data-stroke="#169c81" data-width="100" data-height="100">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
5,3,9,6,5,9,7,3,5,2 <span data-plugin="peity-bar" data-colors="#71b6f9,#ebeff2" data-width="100" data-height="30">5,3,9,6,5,9,7,3,5,2</span>
5,3,2,-1,-3,-2,2,3,5,2 <span data-plugin="peity-bar" data-colors="#71b6f9,#ebeff2" data-width="100" data-height="30">5,3,2,-1,-3,-2,2,3,5,2</span>

Data-attributes charts

Graph Code
6/7 <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#4c5667", "#ebeff2"], "innerRadius": 24, "radius": 30 }'">6/7</span>
4/7 <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#71b6f9`", "#ebeff2"], "innerRadius": 18, "radius": 28 }'">4/7</span>
5/7 <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#5d9cec", "#ebeff2"], "innerRadius": 20, "radius": 24 }'">5/7</span>
6/7 <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#fb6d9d", "#ebeff2"], "innerRadius": 18, "radius": 20 }'">6/7</span>
2020 - Bonoro At Belostemas