Circles (Pie chart)
A lightweight JavaScript library that generates circular graphs in SVG.
Official documentation
For more detailed information and examples, see the official documentation: Circles (Pie chart) .
How to use?
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/appear.js"></script>
<script src="../../assets/vendor/circles/circles.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/hs.circles.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of circles
$('.js-circle').each(function () {
var circle = $.HSCore.components.HSCircles.init($(this));
});
});
</script>
Basic example
<div class="js-circle"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(30, 32, 34, 0.1)", "#1e2022"],
"radius": 50,
"width": 4,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#1e2022"
}'></div>
Text class
Add a secondary text via "secondaryText": ""
<div class="js-circle"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"fgStrokeLinecap": "round",
"fgStrokeMiterlimit": "10",
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 50,
"width": 6,
"additionalText": "",
"textClass": "content-centered-y p-3",
"textColor": "#377dff",
"textFontSize": 32,
"secondaryText": "some text",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "13",
"secondaryTextFontWeight": "400",
"dividerSpace": "10"
}'></div>
Colors
An array of colors. Add any color code "colors": ["rgba(55, 125, 255, 0.1)", "#377dff"] to change the appearance of a circle.
<div class="js-circle"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 50,
"width": 4,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(0, 201, 167, 0.1)", "#00c9a7"],
"radius": 50,
"width": 4,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#00c9a7"
}'></div>
<div class="js-circle"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(0, 223, 252, 0.1)", "#00dffc"],
"radius": 50,
"width": 4,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#00dffc"
}'></div>
<div class="js-circle"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(255, 193, 7, 0.1)", "#ffc107"],
"radius": 50,
"width": 4,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#ffc107"
}'></div>
<div class="js-circle"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(222, 68, 55, 0.1)", "#de4437"],
"radius": 50,
"width": 4,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#de4437"
}'></div>
<div class="js-circle"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(30, 32, 34, 0.1)", "#1e2022"],
"radius": 50,
"width": 4,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#1e2022"
}'></div>
<div class="js-circle"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(119, 131, 143, 0.1)", "#77838f"],
"radius": 50,
"width": 4,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#77838f"
}'></div>
<div class="js-circle"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(255, 255, 255, 0.1)", "#ffffff"],
"radius": 50,
"width": 4,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#ffffff"
}'></div>
Size
Fancy larger or smaller circles? Control them with "radius":. For example, "radius": 30
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 30,
"width": 4,
"textFontSize": 16,
"textFontWeight": 300,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 40,
"width": 4,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 4,
"textFontSize": 28,
"textFontWeight": 500,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 4,
"textFontSize": 40,
"textFontWeight": 700,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
Stroke width
Adjusted with of a ring with"width":. For example, "width": 1
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 50,
"width": 1,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 50,
"width": 3,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 50,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 50,
"width": 10,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 50,
"width": 16,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
Stroke linecap
The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
Learn the differences here.
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"fgStrokeLinecap": "square",
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"fgStrokeLinecap": "round",
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
Max value
Returns the max value of a circle.
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 17,
"maxValue": 25,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 29,
"maxValue": 50,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 51,
"maxValue": 75,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 69,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 150,
"maxValue": 200,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
Type
Any unit measurements or icons can be used to demonstrate the stats. Use "type": "" to show texts or numbers, or use "type": "iconic", "icon": "<i class=\"far fa-bell\"></i>", for icons.
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"type": "iconic",
"icon": "<i class=\"far fa-bell\"></i>",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "%",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "k",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
Animation speed
Value in ms of animation's duration. For example, "duration": 500
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 500,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 5000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 7000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 54,
"maxValue": 100,
"duration": 10000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 60,
"width": 6,
"textFontSize": 22,
"additionalText": "",
"textClass": "content-centered-y",
"textColor": "#377dff"
}'></div>
Additional text
Additional texts are useful to describe/highlight the main values and they can be added to the value either after, like this:
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 25,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top",
"textFontSize": 24,
"textFontWeight": 500,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
or before the value, like this:
"additionalTextType": "prefix" should be added to put the additional text before the value.
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 70,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 24,
"textFontWeight": 500,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
Control additional text size via "textFontSize":
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 10,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 16,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 32,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
And font-weight with "textFontWeight":
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 32,
"textFontWeight": 300,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 32,
"textFontWeight": 400,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 32,
"textFontWeight": 500,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 32,
"textFontWeight": 600,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": " Top ",
"additionalTextType": "prefix",
"textFontSize": 32,
"textFontWeight": 700,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
Hide value
Hide the value of a circle to make the additional text main value via "isHideValue": true
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"isHideValue": true,
"additionalText": "Tripling",
"additionalTextType": "prefix",
"textFontSize": 22,
"textFontWeight": 300,
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
Secondary text
Add texts or explanations to the circles via "secondaryText": ""
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "One of the world's top examples",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "13",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
Control its size with "secondaryTextFontSize": ""
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "10",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "13",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "16",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "22",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "26",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
And font-weight with "secondaryTextFontWeight": ""
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "22",
"secondaryTextFontWeight": "300",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "22",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "22",
"secondaryTextFontWeight": "500",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "22",
"secondaryTextFontWeight": "600",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "Top ",
"additionalTextType": "prefix",
"textFontSize": 22,
"secondaryText": "text size",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "22",
"secondaryTextFontWeight": "700",
"textClass": "content-centered-y p-3",
"textColor": "#377dff"
}'></div>
Set different offset values between additional and secondary texts via "dividerSpace": ""
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "",
"textFontSize": 22,
"secondaryText": "margin-y: 5px spacing",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "14",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff",
"dividerSpace": "10"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "",
"textFontSize": 22,
"secondaryText": "margin-y: 5px spacing",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "14",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff",
"dividerSpace": "20"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "",
"textFontSize": 22,
"secondaryText": "margin-y: 5px spacing",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "14",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff",
"dividerSpace": "30"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "",
"textFontSize": 22,
"secondaryText": "margin-y: 5px spacing",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "14",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff",
"dividerSpace": "40"
}'></div>
<div class="js-circle mr-3"
data-hs-circles-options='{
"value": 10,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["rgba(55, 125, 255, 0.1)", "#377dff"],
"radius": 80,
"width": 6,
"fgStrokeLinecap": "round",
"additionalText": "",
"textFontSize": 22,
"secondaryText": "margin-y: 5px spacing",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "14",
"secondaryTextFontWeight": "400",
"textClass": "content-centered-y p-3",
"textColor": "#377dff",
"dividerSpace": "50"
}'></div>
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of circles
$('.js-circle').each(function () {
var circle = $.HSCore.components.HSCircles.init($(this));
console.log(circle.getValue());
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-circles-options='{
...
// Custom
"additionalTextType": "prefix":,
"additionalText": "%",
"textFontSize": 10,
"textColor": "#ff0000",
"secondaryText": "Some text",
"secondaryTextFontWeight": 700,
"secondaryTextFontSize": 12,
"secondaryTextColor": "#000000",
"fgStrokeLinecap": "round",
"fgStrokeMiterlimit": 10
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-circles-options='{}'. For more detailed or missing attributes/functions, see the official Circles (Pie chart) documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
The radius of the circles. | 80 |
|
|
Value in ms of animation's duration; defaults to 500; if 0 or null is passed, the animation will not run. |
1000 |
|
|
Class name to apply on the generated element wrapping the whole circle. | 'circles-wrap' |
|
|
An array of colors, with the first item coloring the full circle (optional, it will be ['#EEE', '#F00'] if not specified). | ["#377dff", "#e7eaf3"] |
|
|
Hides the animated value of the graph. | false |
|
|
Distance between main and secondary texts. | null |
|
|
The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked. Available values:
|
null |
|
|
The stroke-miterlimit attribute is a presentation attribute defining a limit on the ratio of the miter length to the stroke-width used to draw a miter join. When the limit is exceeded, the join is converted from a miter to a bevel. |
null |
|
|
additionalTextType - if the value is "prefix", then the value of the additionalText parameter will be displayed before the numerical value of the chart, otherwise after that. |
null |
|
|
Postfix/prefix that is added to the numeric value of the graph. | null |
|
|
Font size of the numerical value of the graph. | null |
|
|
Font weight of the numerical value of the graph. | null |
|
|
Graph numerical color. | null |
|
|
Text helper displayed below the numerical value of the graph. | null |
|
|
Font weight of the text helper. | null |
|
|
Font size of the text helper. | null |
|
|
Color of the text helper. | null |