Colors

Use data-color="#000" attribute.

// Colors -HTML
<div class="card-body text-center">
	<p class="text-left">Use <code>data-color="#000"</code> attribute.</p>
	<div data-provide="easypie" data-percent="75"></div>
	<div data-provide="easypie" data-percent="75" data-color="#36a2eb"></div>
	<div data-provide="easypie" data-percent="75" data-color="#9966ff" data-track-color="transparent"></div>
</div>
								

Scale

Use data-scale-color="#000" attribute.

// Scales -HTML
<div class="card">
	<h4 class="card-title"><strong>Scale</strong></h4>
	<div class="card-body text-center">
		<p class="text-left">Use <code>data-scale-color="#000"</code> attribute.</p>
		<div data-provide="easypie" data-percent="75" data-scale-color="#4bc0c0"></div>
		<div data-provide="easypie" data-percent="75" data-scale-color="#465161"></div>
		<div data-provide="easypie" data-percent="75" data-scale-color="transparent"></div>
	</div>
</div>
								

Sizes

Use data-size="100" and data-line-width="5" attributes.

// Sizes -HTML
<div class="card">
	<h4 class="card-title"><strong>Sizes</strong></h4>
	<div class="card-body text-center">
		<p class="text-left">Use <code>data-size="100"</code> and <code>data-line-width="5"</code> attributes.</p>
		<div data-provide="easypie" data-percent="75" data-size="80"></div>
		<div data-provide="easypie" data-percent="75" data-line-width="8"></div>
		<div data-provide="easypie" data-percent="75" data-size="150"></div>
	</div>
</div>
								

With data

Place it inside a .easypie-data.

75%
45 min
75Mb of 100Mb
// With data -HTML
<div class="card">
	<h4 class="card-title"><strong>With data</strong></h4>
	<div class="card-body text-center">
		<p class="text-left">Place it inside a <code>.easypie-data</code>.</p>
		<div data-provide="easypie" data-percent="75">
			<span class="easypie-data lead">75%</span>
		</div>
		<div data-provide="easypie" data-percent="75">
			<span class="easypie-data lead fw-bold">45 min</span>
		</div>
		<div data-provide="easypie" data-percent="75">
			<div class="easypie-data">
				<span>75Mb of <span class="opacity-50">100Mb</span></span>
			</div>
		</div>
	</div>
</div>  
						

Dynamic

// Dynamic -HTML
<div class="card">
	<h4 class="card-title"><strong>Dynamic</strong></h4>
	<div class="card-body flexbox flex-justified align-items-center">
		<div class="text-center">
			<button class="btn btn-outline btn-primary" id="chart-updater">Update chart value</button>
		</div>
		<div class="text-center">
			<div id="avatar-status" data-provide="easypie" data-percent="75"></div>
		</div>
	</div>
</div>	
								
// Dynamic -JS
<script>
app.ready(function(){
  $('#chart-updater').on('click', function(){
	var newVal = Math.random() * 100;
	$('#avatar-status').data('easyPieChart').update(newVal);
  })
});
</script>
								

With avatar

...
...
...
// With avatar -HTML
<div class="card">
	<h4 class="card-title"><strong>With avatar</strong></h4>
	<div class="card-body text-center">
		<div data-provide="easypie" data-percent="75" data-size="90">
			<span class="easypie-data">
			<img class="avatar avatar-xl" src="../assets/images/avatar/avatar-1.png" alt="...">
			</span>
		</div>
		<div data-provide="easypie" data-percent="75" data-size="74" data-line-width="2" data-scale-color="transparent">
			<span class="easypie-data">
			<img class="avatar avatar-lg" src="../assets/images/avatar/avatar-1.png" alt="...">
			</span>
		</div>
		<div data-provide="easypie" data-percent="75" data-size="60" data-line-width="1" data-scale-color="transparent">
			<span class="easypie-data">
			<img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
			</span>
		</div>
	</div>
</div>