Circular Percent Graph With JavaScript And SVG – cyprobar

Category: Javascript , Loading | December 7, 2020
Author: IGIfeanyichukwu
Views Total: 284 views
Official Page: Go to website
Last Update: December 7, 2020
License: MIT

Preview:

Circular Percent Graph With JavaScript And SVG – cyprobar

Description:

cyprobar is a lightweight JavaScript library that allows developers to draw circular percent graphs using SVG.

Easy to use and highly customizable. Ideal for creating circular progress bars to represent percentage data in a stylish way.

See Also:

How to use it:

1. Install and import the cyprobar library.

# NPM
$ npm i cyprobar --save
// Import as an ES module
import CPB from 'cyprobar'
// For browser:
<script src="./dist/cyprobar.js"></script>

2. Create a container in which the library draws the circular progress bar.

<div class="example"></div>

3. Draw a basic circular progress bar as follows:

CPB.draw({ 
  elementClass: 'example', 
  value: "40" // 40%
});

4. The library also has the ability to automatically the percentage difference between two values you provide.

CPB.draw({ 
  elementClass: 'example', 
  value: 2.7, // 27%
  maxValue: 10
});

5. The options below allow you to customize the appearance of the circular progress bar without writing any CSS code.

CPB.draw({ 

  // max: 1000
  barSize: 200,

  // background color
  barBgColor: 'grey',

  // 0-1
  barBgColorOpacity: '0',

  // custom text
  setText: 'CBP',

  // display text inside the graph
  useText: false,

  // value options
  value: 0,
  valueUnit: '%',
  valueColor: 'black',
  valueFont: 'monospace',
  valueFontSize: '60',
  valueOpacity: '1',
  maxValue: 100,

  // customize the indicator here
  indicatorSize: '15',
  indicatorColor: 'black',
  indicatorCap: 'acute-square',

  // customize the track here
  trackSize: 15,
  trackColor: '#eee',

  // set gradient here
  setGradient: [ ['rgba(0, 0, 0, 1)', 0], ['rgba(0, 0, 0, 0.5)', 50], ['rgba(0, 0, 0, 0.2)', 100] ]
   
});

You Might Be Interested In:


Leave a Reply