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/dist/appear.min.js"></script>
                <script src="./assets/vendor/circles.js/circles.js"></script>
              
            

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

              
              
            

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 worlds 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": "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>
                    
                  

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>
                    
                  

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>
              
            

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

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