Pie chart

data-provide="peity-pie" applies to <span>

1/5

1/5

226/360

226/360

0.52/1.561

0.52/1.561

1,4

1,4

226,134

226,134

1,2,1

3,2,1

// Pie chart -HTML
<div class="card">
	<h4 class="card-title"><strong>Pie</strong> chart</h4>
	<div class="card-body">
		<p><code>data-provide="peity-pie"</code> applies to <em><span></em></p>
		<div class="row gap-y">
			<div class="col-md-2 text-center">
				<span data-provide="peity" data-type="pie">1/5</span>
				<p><small>1/5</small></p>
			</div>
			<div class="col-md-2 text-center">
				<span data-provide="peity" data-type="pie" data-fill="#ff6384,#f3f5f6" data-size="42">226/360</span>
				<p><small>226/360</small></p>
			</div>
			<div class="col-md-2 text-center">
				<span data-provide="peity" data-type="pie" data-fill="#36a2eb,#f3f5f6" data-size="48">0.52/1.561</span>
				<p><small>0.52/1.561</small></p>
			</div>
			<div class="col-md-2 text-center">
				<span data-provide="peity" data-type="pie" data-fill="#ffce56,#f3f5f6" data-size="56">1,4</span>
				<p><small>1,4</small></p>
			</div>
			<div class="col-md-2 text-center">
				<span data-provide="peity" data-type="pie" data-fill="#ff9f40,#f3f5f6" data-size="64">226,134</span>
				<p><small>226,134</small></p>
			</div>
			<div class="col-md-2 text-center">
				<span data-provide="peity" data-type="pie" data-fill="#36a2eb,#ff9f40,#ff6384" data-size="72">1,2,1</span>
				<p><small>3,2,1</small></p>
			</div>
		</div>
	</div>
</div>				
						

Donut

data-provide="peity-donut" applies to <span>

1/5

1/5

226/360

226/360

0.52/1.561

0.52/1.561

1,4

1,4

226,134

226,134

1,2,1

1,2,1

// Donut chart-HTML
<div class="card-body">
	<p><code>data-provide="peity-donut"</code> applies to <em><span></em></p>
	<div class="row gap-y">
		<div class="col-6 col-md-2 text-center">
			<span data-provide="peity" data-type="donut">1/5</span>
			<p><small>1/5</small></p>
		</div>
		<div class="col-6 col-md-2 text-center">
			<span data-provide="peity" data-type="donut" data-fill="#ff6384,#f3f5f6" data-size="42">226/360</span>
			<p><small>226/360</small></p>
		</div>
		<div class="col-6 col-md-2 text-center">
			<span data-provide="peity" data-type="donut" data-fill="#36a2eb,#f3f5f6" data-size="48" data-inner-radius="20">0.52/1.561</span>
			<p><small>0.52/1.561</small></p>
		</div>
		<div class="col-6 col-md-2 text-center">
			<span data-provide="peity" data-type="donut" data-fill="#ffce56,#f3f5f6" data-size="56" data-inner-radius="10">1,4</span>
			<p><small>1,4</small></p>
		</div>
		<div class="col-6 col-md-2 text-center">
			<span data-provide="peity" data-type="donut" data-fill="#ff9f40,#f3f5f6" data-size="64" data-inner-radius="30">226,134</span>
			<p><small>226,134</small></p>
		</div>
		<div class="col-6 col-md-2 text-center">
			<span data-provide="peity" data-type="donut" data-fill="#36a2eb,#ff9f40,#ff6384" data-size="72">1,2,1</span>
			<p><small>1,2,1</small></p>
		</div>
	</div>
</div>				
						

Line

data-provide="peity-line" applies to <span>

5,3,9,6,5,9,7,3,5,2

5,3,2,-1,-3,-2,2,3,5,2

0,-3,-6,-4,-5,-4,-7,-3,-5,-2
// Line chart -HTML
<div class="card-body">
	<p><code>data-provide="peity-line"</code> applies to <em><span></em></p>
	<div class="row">
		<div class="col-md-6 col-lg-4 text-center">
			<span data-provide="peity" data-type="line">5,3,9,6,5,9,7,3,5,2</span>
		</div>
		<div class="col-md-6 col-lg-4 text-center">
			<hr class="d-md-none">
			<span data-provide="peity" data-type="line" data-width="250" data-height="64" data-fill="#33cabb">5,3,2,-1,-3,-2,2,3,5,2</span>
		</div>
		<div class="col-md-6 col-lg-4 text-center">
			<hr class="d-lg-none">
			<span data-provide="peity" data-type="line" data-width="250" data-height="96" data-stroke="#f96868" data-fill="transparent">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
		</div>
	</div>
</div>				
						

Bar

data-provide="peity-bar" applies to <span>

5,3,9,6,5,9,7,3,5,2

5,3,2,-1,-3,-2,2,3,5,2

0,-3,-6,-4,-5,-4,-7,-3,-5,-2
// Bar chart -HTML
<div class="card-body">
	<p><code>data-provide="peity-bar"</code> applies to <em><span></em></p>
	<div class="row">
		<div class="col-md-6 col-lg-4 text-center">
			<span data-provide="peity" data-type="bar">5,3,9,6,5,9,7,3,5,2</span>
		</div>
		<div class="col-md-6 col-lg-4 text-center">
			<hr class="d-md-none">
			<span data-provide="peity" data-type="bar" data-width="250" data-height="64" data-fill="#33cabb, #f3f5f6">5,3,2,-1,-3,-2,2,3,5,2</span>
		</div>
		<div class="col-md-6 col-lg-4 text-center">
			<hr class="d-lg-none">
			<span data-provide="peity" data-type="bar" data-width="250" data-height="96" data-fill="#48b0f7, #f96868">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
		</div>
	</div>
</div>				
						

Dynamic

5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2
// Dynamic chart -HTML
<div class="card-body">
	<span data-provide="peity" data-type="line" id="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
</div>
						
// Dynamic chart -JS
<script>
	app.ready(function(){
	  var updatingChart = $("#updating-chart");
	
	  setInterval(function() {
		var random = Math.round(Math.random() * 10);
		var values = updatingChart.text().split(",");
		values.shift();
		values.push(random);
	
		updatingChart.text(values.join(",")).change();
	  }, 1000)
	});
</script>