Circles (Pie chart)

A lightweight JavaScript library that generates circular graphs in SVG.

Dokumentasi Circles

Cara Pakai

Copy-paste script berikut sebelum tag penutup <body>

    
      <script>
        (function() {
          // INITIALIZATION OF CIRCLES
          // =======================================================
          setTimeout(() => {
            document.querySelectorAll('.js-circle').forEach(item => {
              Nue.components.NueCircles.init(item)
            })
          })
        });
      </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

ParametersDescriptionDefault 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