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>

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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

<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="".

Result
HTML

<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="".

Result
HTML

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

Result
HTML

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

Result
HTML

<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="".

Result
HTML

<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="".

Result
HTML

<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="".

Result
HTML

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

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.