Circles (Pie chart)

A lightweight JavaScript library that generates circular graphs in SVG.

Official documentation

For more detailed information and examples, see the official documentation: Circles (Pie chart) .

How to use?

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 MyTravel 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.
Contact Us