Create Simple Percentage Circles charts Using SVG | MK Charts


MK Charts is a dependency-free JavaScript library to draw pie charts (progress bars) to visualize the percentage data that you specify.

svg percentage circle, css percentage circle, svg charts, free svg charts, circular percentage chart css, svg chart generator, pure css circular progress bar html css svg

How to make use of it:

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

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

2. Create a primary share circle and decide the % value within 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 scale 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>

Create Percentage Circles Using SVG, MK Charts Plugin/Github

See Demo And Download

Official Website(marcuskirschen): Click Here

This superior jQuery/javascript plugin is developed by marcuskirschen. For extra Advanced usage, please go to the official website.