Circles (Pie chart)

A lightweight JavaScript library that generates circular graphs in SVG.

How to use?

To add hs.chart-pie.js in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin.

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

            
              <script src="../../assets/vendor/appear.js"></script>
              <script src="../../assets/vendor/circles/circles.min.js"></script>
            
          

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

            
              <script src="../../assets/js/components/hs.chart-pie.js"></script>
            
          

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            
          

Basic example

                  
                    <div class="js-pie"
                         data-circles-text-class="content-centered-y"
                         data-circles-value="54"
                         data-circles-max-value="100"
                         data-circles-bg-color="rgba(30, 32, 34, 0.1)"
                         data-circles-fg-color="#1e2022"
                         data-circles-radius="50"
                         data-circles-stroke-width="4"
                         data-circles-additional-text=""
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true"
                         data-circles-color="#1e2022"
                         data-circles-font-size="24"></div>
                  
                

Text class

To add secondary and other values within a circle, we positioned the circles with the help of position: absolute; - and they can be controlled via data-circles-text-class="some-text".

For example, data-circles-text-class="content-centered-y"

                  
                    <div class="js-pie"
                         data-circles-text-class="content-centered-y p-3"></span>'></div>
                  
                

Colors

An array of colors. Add any color hex code to change the appearance of a circle.

                  
                    <div class="js-pie"
                         data-circles-bg-color="rgba(55, 125, 255, 0.1)"
                         data-circles-fg-color="#377dff"
                         data-circles-color="#377dff"></div>

                    <div class="js-pie"
                         data-circles-bg-color="rgba(0, 201, 167, 0.1)"
                         data-circles-fg-color="#00c9a7"
                         data-circles-color="#00c9a7"></div>

                    <div class="js-pie"
                         data-circles-bg-color="rgba(0, 223, 252, 0.1)"
                         data-circles-fg-color="#00dffc"
                         data-circles-color="#00dffc"></div>

                    <div class="js-pie"
                         data-circles-bg-color="rgba(255, 193, 7, 0.1)"
                         data-circles-fg-color="#ffc107"
                         data-circles-color="#ffc107"></div>

                    <div class="js-pie"
                         data-circles-bg-color="rgba(222, 68, 55, 0.1)"
                         data-circles-fg-color="#de4437"
                         data-circles-color="#de4437"></div>

                    <div class="js-pie"
                         data-circles-bg-color="rgba(30, 32, 34, 0.1)"
                         data-circles-fg-color="#1e2022"
                         data-circles-color="#1e2022"></div>

                    <div class="js-pie"
                         data-circles-bg-color="rgba(119, 131, 143, 0.1)"
                         data-circles-fg-color="#77838f"
                         data-circles-color="#77838f"></div>

                    <div class="js-pie bg-dark mr-3"
                         data-circles-bg-color="rgba(255, 255, 255, 0.1)"
                         data-circles-fg-color="#ffffff"
                         data-circles-color="#ffffff"></div>
                  
                

Size

Fancy larger or smaller circles? Control them with data-circles-radius="".

For example, data-circles-radius="30"

                  
                    <div class="js-pie"
                         data-circles-radius="30"
                         data-circles-font-size="16"
                         data-circles-font-weight="300"></div>

                    <div class="js-pie"
                         data-circles-radius="40"
                         data-circles-font-size="22"></div>

                    <div class="js-pie"
                         data-circles-radius="60"
                         data-circles-font-size="28"
                         data-circles-font-weight="500"></div>

                    <div class="js-pie"
                         data-circles-radius="80"
                         data-circles-font-size="40"
                         data-circles-font-weight="700"></div>
                  
                

Stroke width

The width of the ring. Can be adjusted with data-circles-stroke-width="".

For example, data-circles-stroke-width="3"

                  
                    <div class="js-pie"
                         data-circles-stroke-width="1"></div>

                    <div class="js-pie"
                         data-circles-stroke-width="2"></div>

                    <div class="js-pie"
                         data-circles-stroke-width="4"></div>

                    <div class="js-pie"
                         data-circles-stroke-width="6"></div>

                    <div class="js-pie"
                         data-circles-stroke-width="8"></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-pie"
                         data-circles-fg-stroke-linecap="round"></span>'></div>

                    <div class="js-pie"
                         data-circles-fg-stroke-linecap="square"></span>'></div>

                    <div class="js-pie"
                         data-circles-fg-stroke-linecap="butt"></span>'></div>
                  
                

Max value

Returns the max value of the circle.

                  
                    <div class="js-pie"
                         data-circles-value="17"
                         data-circles-max-value="25"></div>

                    <div class="js-pie"
                         data-circles-value="29"
                         data-circles-max-value="50"></div>

                    <div class="js-pie"
                         data-circles-value="51"
                         data-circles-max-value="75"></div>

                    <div class="js-pie"
                         data-circles-value="69"
                         data-circles-max-value="100"></div>

                    <div class="js-pie"
                         data-circles-value="150"
                         data-circles-max-value="200"></div>
                  
                

Type

Any unit measurements or icons can be used to demonstrate the stats. Use data-circles-additional-text="" to show texts or numbers, or use data-circles-type="iconic" data-circles-icon='<span class="far fa-bell"></span>' for icons.

                  
                    <div class="js-pie"
                         data-circles-type="iconic"
                         data-circles-icon='<span class="far fa-bell"></span>'></div>

                    <div class="js-pie"
                         data-circles-additional-text="%"></div>

                    <div class="js-pie"
                         data-circles-additional-text="k"></div>
                  
                

Animation speed

Value in ms of animation's duration.

For example, data-circles-duration="5000"

                  
                    <div class="js-pie"
                         data-circles-duration="500"
                         data-circles-scroll-animate="true"></span>'></div>

                    <div class="js-pie"
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true"></span>'></div>

                    <div class="js-pie"
                         data-circles-duration="5000"
                         data-circles-scroll-animate="true"></span>'></div>

                    <div class="js-pie"
                         data-circles-duration="7000"
                         data-circles-scroll-animate="true"></span>'></div>

                    <div class="js-pie"
                         data-circles-duration="10000"
                         data-circles-scroll-animate="true"></span>'></div>
                  
                

Additional text

Additional texts are useful to describe/highlight the main values.

Additional texts can be added to the value either after, like this:

                  
                    <div class="js-pie"
                         data-circles-text-class="content-centered-y p-3"
                         data-circles-value="25"
                         data-circles-max-value="100"
                         data-circles-bg-color="rgba(55, 125, 255, 0.1)"
                         data-circles-fg-color="#377dff"
                         data-circles-fg-stroke-linecap="round"
                         data-circles-fg-stroke-miterlimit="10"
                         data-circles-radius="80"
                         data-circles-stroke-width="7"
                         data-circles-additional-text="Top "
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true"
                         data-circles-color="#377dff"
                         data-circles-font-size="24"
                         data-circles-font-weight="500"></div>
                  
                

or before the value, like this:

data-circles-additional-text-type="prefix" should be added to put the additional text before the value.

                  
                    <div class="js-pie"
                         data-circles-text-class="content-centered-y p-3"
                         data-circles-value="25"
                         data-circles-max-value="100"
                         data-circles-bg-color="rgba(55, 125, 255, 0.1)"
                         data-circles-fg-color="#377dff"
                         data-circles-fg-stroke-linecap="round"
                         data-circles-fg-stroke-miterlimit="10"
                         data-circles-radius="80"
                         data-circles-stroke-width="7"
                         data-circles-additional-text="Top "
                         data-circles-additional-text-type="prefix"
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true"
                         data-circles-color="#377dff"
                         data-circles-font-size="24"
                         data-circles-font-weight="500"></div>
                  
                

Control the size of the additional text with the use of data-circles-font-size="".

                  
                    <div class="js-pie"
                         data-circles-font-size="10"></span>'></div>

                    <div class="js-pie"
                         data-circles-font-size="16"></span>'></div>

                    <div class="js-pie"
                         data-circles-font-size="22"></span>'></div>

                    <div class="js-pie"
                         data-circles-font-size="32"></span>'></div>
                  
                

And font-weight with data-circles-font-weight="".

                  
                    <div class="js-pie"
                         data-circles-font-weight="300"></span>'></div>

                    <div class="js-pie"
                         data-circles-font-weight="400"></span>'></div>

                    <div class="js-pie"
                         data-circles-font-weight="500"></span>'></div>

                    <div class="js-pie"
                         data-circles-font-weight="600"></span>'></div>

                    <div class="js-pie"
                         data-circles-font-weight="700"></span>'></div>
                  
                

Hide value

Hide the value of a circle to make the additional text main value.

                  
                    <div class="js-pie"
                         data-circles-is-hide-value="true"
                         data-circles-additional-text="Tripling"
                         data-circles-additional-text-type="prefix"></span>'></div>
                  
                

Secondary text

Add texts or explanations to the circles via data-circles-secondary-* attributes.

                  
                    <div class="js-pie"
                         data-circles-is-hide-value="true"
                         data-circles-additional-text="Tripling"
                         data-circles-additional-text-type="prefix"></span>'></div>
                  
                

Control the size of the secondary text with the use of data-circles-secondary-font-size="".

                  
                    <div class="js-pie"
                         data-circles-secondary-font-size="10"></span>'></div>

                    <div class="js-pie"
                         data-circles-secondary-font-size="13"></span>'></div>

                    <div class="js-pie"
                         data-circles-secondary-font-size="16"></span>'></div>

                    <div class="js-pie"
                         data-circles-secondary-font-size="22"></span>'></div>

                    <div class="js-pie"
                         data-circles-secondary-font-size="26"></span>'></div>
                  
                

And font-weight with data-circles-secondary-font-weight="".

                  
                    <div class="js-pie"
                         data-circles-secondary-font-weight="300"></span>'></div>

                    <div class="js-pie"
                         data-circles-secondary-font-weight="400"></span>'></div>

                    <div class="js-pie"
                         data-circles-secondary-font-weight="500"></span>'></div>

                    <div class="js-pie"
                         data-circles-secondary-font-weight="600"></span>'></div>

                    <div class="js-pie"
                         data-circles-secondary-font-weight="700"></span>'></div>
                  
                

Set different offset values between additional and secondary texts via data-circles-divider-space="".

                  
                    <div class="js-pie"
                         data-circles-divider-space="10"></span>'></div>

                    <div class="js-pie"
                         data-circles-divider-space="20"></span>'></div>

                    <div class="js-pie"
                         data-circles-divider-space="30"></span>'></div>

                    <div class="js-pie"
                         data-circles-divider-space="40"></span>'></div>

                    <div class="js-pie"
                         data-circles-divider-space="50"></span>'></div>
                  
                

JavaScript behavior

Attributes

            
              data-circles-text-class="some-class" - string
              data-circles-is-hide-value="true" - boolean
              data-circles-fg-stroke-linecap="round" - integer
              data-circles-fg-stroke-miterlimit="4" - integer
              data-circles-additional-text-type="prefix" - integer
              data-circles-secondary-text="example text" - string
              data-circles-secondary-color="#77838f" - string
              data-circles-secondary-font-size="13" - integer
              data-circles-secondary-font-weight="400" - integer
              data-circles-divider-space="10" - integer
              data-circles-scroll-animate="true" - boolean
              data-circles-value="50" - integer
              data-circles-radius="50" - integer
              data-circles-max-value="50" - integer
              data-circles-stroke-width="2" - integer
              data-circles-type="iconic" - string
              data-circles-icon='<span class="fas fa-icon"></span>' - string
              data-circles-additional-text="k" - string
              data-circles-bg-color="#ffffff" - string
              data-circles-fg-color="#ffffff" - string
              data-circles-duration="2000" - integer
              data-circles-font-size="30" - integer
              data-circles-font-weight="700" - integer
              data-circles-color="#ffffff" - string
            
          

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-circles-value="".

Attribute Description

data-circles-text-class

Changes block class with text.

data-circles-is-hide-value

Hides the animated value of the graph.

data-circles-fg-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. Available values:
  • square
  • round
  • butt

data-circles-fg-stroke-miterlimit

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.

data-circles-additional-text-type

If the value is prefix, set to prefix, if any other value or absence of value then set to postfix.

data-circles-secondary-text

Secondary text.

data-circles-secondary-color

Secondary text color.

data-circles-secondary-font-size

Font size of the secondary text.

data-circles-secondary-font-weight

Font weight of the secondary text.

data-circles-divider-space

Distance between main and secondary texts.

data-circles-scroll-animate

If set to true, the graph appears with the animation.

data-circles-value

Graph value.

data-circles-radius

Graph radius.

data-circles-max-value

The maximum value from which the percentage of shares will be considered.

data-circles-stroke-width

Width of the line graph.

data-circles-type

If iconic, then the icon specified in data-circles-icon will be displayed in the center of the graph.

data-circles-icon

Markup for the icon, which is displayed in the center of the graph, if data-circles-type="" is set to iconic.

data-circles-additional-text

Postfix that is added to the value that is displayed in the center of the graph.

data-circles-bg-color

Graph background color.

data-circles-fg-color

Graph line color.

data-circles-duration

The animation speed of rendering the graph if data-circles-scroll-animate="" is set to true.

data-circles-font-size

The font size of the graph value that is displayed in the center.

data-circles-font-weight

Font-weight of the font value of the graph that is displayed in the center.

data-circles-color

The font color of the graph value that is displayed in the center.