Press "Enter" to skip to content

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 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 colour 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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *