Create Percentage Circles Using SVG – MK Charts

Category: Chart & Graph , Javascript | March 16, 2021
Author:marcuskirschen
Views Total:1,836 views
Official Page:Go to website
Last Update:March 16, 2021
License:MIT

Preview:

Create Percentage Circles Using SVG – MK Charts

Description:

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

See Also:

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>

You Might Be Interested In:


One thought on “Create Percentage Circles Using SVG – MK Charts

  1. HenryJams2-A-lot-of-BeastieBoys

    How can you reset the animation when scrolled up or down?

    Reply

Leave a Reply