Create Percentage Circles Using SVG – MK Charts

Preview:

Description:

MK Charts is a zero-dependency JavaScript library for drawing circular charts (progress bars) to visualize the percentage data you specify.

See Also:

• 10 Best Circular/Radial Progress Bar JavaScript Plugins

How to use it:

1. Insert the MK Charts’ JavaScript and CSS into the document.

<link rel="stylesheet" href="css/mk_charts.css" />
<script src="js/mk_charts.js"></script>

2. Create a basic percentage circle and determine the percent value in the data-percent attribute.

<div class="mkCharts" data-percent="35"></div>

3. Specify the color of the circle.

<div class="mkCharts" data-percent="45" data-color="#654321"></div>

4. Set the size of the circle.

<div class="mkCharts" data-percent="45" data-size="125"></div>

5. Set the width of the stroke.

<div class="mkCharts" data-percent="45" data-stroke="3"></div>