Circles
Lightweight JavaScript library that generates circular graphs in SVG.
- License: MIT
- https://github.com/lugolabs/circles
Circles Basic
<!-- dark -->
<div class="d-inline-block" data-circles='{
"value": 48,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(0, 0, 0, 0.1)", "#313131"],
"width": 4,
"radius": 50,
"textClass": "fw-light",
"textFontSize": 32
}'></div>
<!-- primary -->
<div class="d-inline-block" data-circles='{
"value": 48,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"width": 4,
"radius": 50,
"textClass": "fw-light text-gray-800",
"textFontSize": 32
}'></div>
<!-- success -->
<div class="d-inline-block" data-circles='{
"value": 39,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(109, 187, 48, 0.1)", "#6dbb30"],
"width": 4,
"radius": 50,
"textClass": "fw-light text-success",
"textFontSize": 32
}'></div>
<!-- danger -->
<div class="d-inline-block" data-circles='{
"value": 83,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(246, 78, 96, 0.1)", "#f64e60"],
"width": 4,
"radius": 50,
"textClass": "fw-light text-danger",
"textFontSize": 32
}'></div>
<!-- warning -->
<div class="d-inline-block" data-circles='{
"value": 83,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(250, 215, 118, 0.2)", "#fad776"],
"width": 4,
"radius": 50,
"textClass": "fw-light text-warning",
"textFontSize": 32
}'></div>
<!-- info -->
<div class="d-inline-block" data-circles='{
"value": 83,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(115, 231, 247, 0.2)", "#73e7f7"],
"width": 4,
"radius": 50,
"textClass": "fw-light text-info",
"textFontSize": 32
}'></div>
<!-- Vendor : Circles -->
<script src="../assets/vendors/circles/circles.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll("[data-circles]").forEach(function(el) {
let ID = el.getAttribute('id');
let conf = el.getAttribute('data-circles');
conf = conf ? JSON.parse( conf ) : {};
conf.textClass += ' lh-1 d-middle flex-column';
/* ID */
if( !ID ) {
ID = 'r_' + Math.random().toString(36).substring(7);
el.setAttribute('id', ID);
}
Circles.create(Object.assign({
id: ID,
radius: 50,
value: 0,
maxValue: 100,
colors: ["rgba(55, 125, 255, 0.1)", "#377dff"],
duration: 600,
text: function (value) {
/* icon */
if( conf.icon ) value = conf.icon;
/* append / prepend */
value = ( conf.append || '' ) + value + ( conf.prepend || '' );
/* text color */
if( conf.textColorHex ) value = '<span style="color:'+conf.textColorHex+'">' + value + '</span>';
/* text size */
if( conf.textFontSize ) value = '<span style="font-size:'+conf.textFontSize+'px">' + value + '</span>';
/* subtitle */
if( conf.subtitleText ) value += '<div class="' + conf.subtitleClass + '">' + conf.subtitleText + '</div>';
/* return */
return value;
}
}, conf) );
});
});
</script>
Circles Subtitle Text
<!-- subtitle text -->
<div class="d-inline-block" data-circles='{
"value": 48,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"subtitleText": "subtitle",
"subtitleClass": "fs-6 fw-normal text-gray-600",
"width": 4,
"radius": 50,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 32
}'></div>
Circles Icon
<!-- subtitle text -->
<div class="d-inline-block" data-circles='{
"value": 48,
"maxValue": 100,
"duration": 1300,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"icon": "<svg height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"></path></svg>",
"textColorHex": "#5093ff",
"width": 4,
"radius": 50
}'></div>
Circles Append / Prepend
<!-- append -->
<div class="d-inline-block" data-circles='{
"value": 48,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"append": "$",
"width": 4,
"radius": 50,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 32
}'></div>
<!-- prepend -->
<div class="d-inline-block" data-circles='{
"value": 48,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"prepend": "K",
"width": 4,
"radius": 50,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 32
}'></div>
Circles Size
<!-- "radius": 30, "textFontSize": 22 -->
<div class="d-inline-block m-1" data-circles='{
"value": 30,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"width": 4,
"radius": 30,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 22
}'></div>
<!-- "radius": 40, "textFontSize": 28 -->
<div class="d-inline-block m-1" data-circles='{
"value": 40,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"width": 4,
"radius": 40,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 28
}'></div>
<!-- "radius": 50, "textFontSize": 32 -->
<div class="d-inline-block m-1" data-circles='{
"value": 50,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"width": 4,
"radius": 50,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 32
}'></div>
<!-- "radius": 60, "textFontSize": 36 -->
<div class="d-inline-block m-1" data-circles='{
"value": 60,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"width": 4,
"radius": 60,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 36
}'></div>
<!-- "radius": 70, "textFontSize": 42 -->
<div class="d-inline-block m-1" data-circles='{
"value": 70,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"width": 4,
"radius": 70,
"textClass": "fw-medium",
"textColorHex": "#5093ff",
"textFontSize": 42
}'></div>
<!-- prepend -->
<div class="d-inline-block" data-circles='{
"value": 48,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"prepend": "K",
"width": 4,
"radius": 50,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 32
}'></div>
Circles Stroke Width
<!-- change "width" -->
<div class="d-inline-block m-1" data-circles='{
"value": 25,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"width": 10,
"radius": 50,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 32
}'></div>
<!-- prepend -->
<div class="d-inline-block" data-circles='{
"value": 48,
"maxValue": 100,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"prepend": "K",
"width": 4,
"radius": 50,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 32
}'></div>
Circles Text
<!-- Orders -->
<div class="d-inline-block m-1" data-circles='{
"value": 2566,
"maxValue": 2566,
"duration": 600,
"colors": ["rgba(55, 125, 255, 0.1)", "#5093ff"],
"append": "<div class=\"fw-medium fs-2\">Orders</div>",
"subtitleText": "December 2021",
"subtitleClass": "fw-normal text-gray-600 mt-1",
"width": 5,
"radius": 80,
"textClass": "fw-light",
"textColorHex": "#5093ff",
"textFontSize": 22
}'></div>
<!-- Revenue -->
<div class="d-inline-block m-1" data-circles='{
"value": 256,
"maxValue": 256,
"duration": 600,
"colors": ["rgba(109, 187, 48, 0.1)", "#6dbb30"],
"append": "<div class=\"text-success fw-medium fs-2\">Revenue</div>",
"prepend": "K",
"subtitleText": "December 2021",
"subtitleClass": "fw-normal text-gray-600 mt-1",
"width": 5,
"radius": 80,
"textClass": "fw-light text-success",
"textFontSize": 22
}'></div>