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-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>
Colors
<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
<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
<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>
Type
<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>
<div class="js-pie"
data-circles-type="iconic"
data-circles-icon="Hi"></div>
Animation speed
<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>
Attributes
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="fa 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 |
|---|---|
|
|
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. |
Official Documentation
For more detailed information, see the official documentation: Circles (Pie chart).