Clean Cutta, Shortcodes
1 minute read

Circle chart

Parameters:

  • value – number from 0 to 100, for example: “50”.
  • prefix – sign before number value, for example: “+”.
  • speed – speed of animation in millisecond, for example: “1000”.
  • size – size of circle, for example: “135”.
  • line_size – size of line, for example: “10”.
  • color – set color of animated element, for example: “#b24d26”.
  • text_color – set color of text, exemplary value: “#b24d26”.
  • bgcolor – set color of background, exemplary value: #e6e6e6″.
  • class – (optional) add custom CSS class.
  • style – (optional) add custom inline style.
  • id – (optional) add custom id (must have unique value).

Exemplary usage

[circle_chart prefix="" value="75" size="135" line_size="10" speed="3000" style="" color="#b24d26" bgcolor="#e6e6e6" text_color="#b24d26"]

See also demo of circle chart. In full download package (Dummy data/shortcodes-pages/counters.html) you can find the file with shortcodes we used to create demo page.

Did you know...

You can use “circle chart” element in drag and drop website builder (Visual Composer) and customize this element easily without coding skills. Parameters and design options are the same as in shortcode.