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 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>
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 |
|---|---|
|
|
Changes block class with text. |
|
|
Hides the animated value of the graph. |
|
|
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:
|
|
|
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. |
|
|
If the value is prefix, set to prefix, if any other value or absence of value then set to postfix. |
|
|
Secondary text. |
|
|
Secondary text color. |
|
|
Font size of the secondary text. |
|
|
Font weight of the secondary text. |
|
|
Distance between main and secondary texts. |
|
|
If set to true, the graph appears with the animation. |
|
|
Graph value. |
|
|
Graph radius. |
|
|
The maximum value from which the percentage of shares will be considered. |
|
|
Width of the line graph. |
|
|
If iconic, then the icon specified in data-circles-icon will be displayed in the center of the graph. |
|
|
Markup for the icon, which is displayed in the center of the graph, if data-circles-type="" is set to iconic. |
|
|
Postfix that is added to the value that is displayed in the center of the graph. |
|
|
Graph background color. |
|
|
Graph line color. |
|
|
The animation speed of rendering the graph if data-circles-scroll-animate="" is set to true. |
|
|
The font size of the graph value that is displayed in the center. |
|
|
Font-weight of the font value of the graph that is displayed in the center. |
|
|
The font color of the graph value that is displayed in the center. |