Circles (Pie chart)

A lightweight JavaScript library that generates circular graphs in SVG.

Circles documentation

How to use

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

        
          <script src="./node_modules/appear/dist/appear.min.js"></script>
          <script src="./node_modules/circles.js/circles.js"></script>

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

        
          <script src="./assets/js/hs.circles.js"></script>

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

        
          <script>
            (function() {
              // INITIALIZATION OF CIRCLES
              // =======================================================
              setTimeout(() => {
                HSCore.components.HSCircles.init('.js-circle')
              })
            })()
          </script>

Basic example

Text class

Use "secondaryText": "" to add a secondary text.

Colors

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

Size

Fancy larger or smaller circles? Control them with "radius":

Stroke width

Adjusted with of a ring with "width":

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.

Max value

Returns the max value of a circle.

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.

Animation speed

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

Additional text

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

Or before the value, like this: "additionalTextType": "prefix" should be added to put the additional text before the value.

Control additional text size with "textFontSize":

Control text font weight with "textFontWeight":

Hide value

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

Methods

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