Circles (Pie chart)

A lightweight JavaScript library that generates circular graphs in SVG.

Circles (Pie chart) documentation

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

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

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>
Copy

Basic example

0
<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>
Copy

Text class

Add a secondary text via "secondaryText": ""

0
some text
<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>
Copy

Colors

An array of colors. Add any color code "colors": ["rgba(55, 125, 255, 0.1)", "#377dff"] to change the appearance of a circle.

0
0
0
0
0
0
0
0
<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>
Copy

Size

Fancy larger or smaller circles? Control them with "radius":. For example, "radius": 30

0
0
0
0
<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>
Copy

Stroke width

Adjusted with of a ring with"width":. For example, "width": 1

0
0
0
0
0
<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>
Copy

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.

0
0
<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>
Copy

Max value

Returns the max value of a circle.

0
0
0
0
0
<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>
Copy

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.

0%
0k
<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>
Copy

Animation speed

Value in ms of animation's duration. For example, "duration": 500

0
0
0
0
0
<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>
Copy

Additional text

Additional texts are useful to describe/highlight the main values and they can be added to the value either after, like this:

0 Top
<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>
Copy

or before the value, like this:

"additionalTextType": "prefix" should be added to put the additional text before the value.

Top 0
<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>
Copy

Control additional text size via "textFontSize":

Top 0
Top 0
Top 0
Top 0
<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>
Copy

And font-weight with "textFontWeight":

Top 0
Top 0
Top 0
Top 0
Top 0
<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>
Copy

Hide value

Hide the value of a circle to make the additional text main value via "isHideValue": true

Tripling
<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>
Copy

Secondary text

Add texts or explanations to the circles via "secondaryText": ""

Top 0
One of the worlds top examples
<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 worlds top examples",
       "secondaryTextColor": "#77838f",
       "secondaryTextFontSize": "13",
       "secondaryTextFontWeight": "400",
       "textClass": "content-centered-y p-3",
       "textColor": "#377dff"
     }'></div>
Copy

Control its size with "secondaryTextFontSize": ""

Top 0
text size
Top 0
text size
Top 0
text size
Top 0
text size
Top 0
text size
<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>
Copy

And font-weight with "secondaryTextFontWeight": ""

Top 0
text size
Top 0
text size
Top 0
text size
Top 0
text size
Top 0
text size
<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": "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": "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": "16",
       "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": "16",
       "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": "16",
       "secondaryTextFontWeight": "700",
       "textClass": "content-centered-y p-3",
       "textColor": "#377dff"
     }'></div>
Copy

Set different offset values between additional and secondary texts via "dividerSpace": ""

0
margin-y: 5px spacing
0
margin-y: 5px spacing
0
margin-y: 5px spacing
0
margin-y: 5px spacing
0
margin-y: 5px spacing
<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>
Copy

JavaScript behavior

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>
Copy

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
Copy

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

radius

 The radius of the circles. 80

duration

 Value in ms of animation's duration; defaults to 500; if 0 or null is passed, the animation will not run. 1000

wrpClass

 Class name to apply on the generated element wrapping the whole circle. 'circles-wrap'

colors

 An array of colors, with the first item coloring the full circle (optional, it will be ['#EEE', '#F00'] if not specified). ["#377dff", "#e7eaf3"]

isHideValue

 Hides the animated value of the graph. false

dividerSpace

 Distance between main and secondary texts. null

fgStrokeLinecap

 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:
  • square
  • round
  • butt
 null

fgStrokeMiterlimit

 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

 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

additionalText

 Postfix/prefix that is added to the numeric value of the graph. null

textFontSize

 Font size of the numerical value of the graph. null

textFontWeight

 Font weight of the numerical value of the graph. null

textColor

 Graph numerical color. null

secondaryText

 Text helper displayed below the numerical value of the graph. null

secondaryTextFontWeight

 Font weight of the text helper. null

secondaryTextFontSize

 Font size of the text helper. null

secondaryTextColor

 Color of the text helper. null