Percentage Circle

Components > Displaying Data > Percentage Circle

Use this component to...

Use this component to display a percentage value graphically.

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Example of a percentage circle displaying the value 75 as both its text and its value

The percentage circle component visually represents a percentage value as a colored circle wrapped around a text value.

The colored portion of the circle represents the percentage amount, somewhat similar to a progress bar, but displayed as a circle.

This element is useful in dashboards since it is large and displays a numeric value as a type of infographic.

Development

Web component development

Component reference

rui-percentage-circle

Module: rui-percentage-circle - Package: @jkhy/responsive-ui-wc

Displays a percentage as a circle wrapped around a value.

Name	Type	Default	Description
text	string	''	The text displayed in the center of the circle. This is often the same as the percentage value, but can be any text value.
value	number	0	Specifies the percentage value (0-100) displayed. Values less than 0 are shown as 0; values greater than 100 are shown as 100.
size	string	‘medium’	Specifies the relative size of the percentage circle. Valid values are ‘small’, ‘medium’, and ’large’.

Begin by importing the rui-percentage-circle module into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-percentage-circle/rui-percentage-circle-imports';

Use the rui-percentage-circle element to create a percentage circle.

Using the component

<rui-percentage-circle [text]="currentValue" [value]="currentValue"></rui-percentage-circle>

Angular wrapper development

Wrapper reference

jha-percentage-circle

Module: jha-percentage-circle - Package: @jkhy/responsive-ui-angular

Displays a percentage as a circle wrapped around a value.

Name	Type	Default	Description
jhaText	string	''	The text displayed in the center of the circle. This is often the same as the percentage value, but can be any text value.
jhaValue	number	0	Specifies the percentage value (0-100) displayed. Values less than 0 are shown as 0; values greater than 100 are shown as 100.
size	jhaSize	‘medium’	Specifies the relative size of the percentage circle. Valid values are ‘small’, ‘medium’, and ’large’.

Begin by importing the JhaPercentageCircleModule module into your application.

Import the module

// import into app.module
import { JhaPercentageCircleModule } from '@jkhy/responsive-ui-angular/jha-percentage-circle';

@NgModule({
    imports: [
        ...
        JhaPercentageCircleModule,
        ...
    ]
})

export class AppModule(){}

Use the jha-percentage-circle element to create a percentage circle.

Using the component

<jha-percentage-circle [jhaText]="currentValue" [jhaValue]="currentValue"></jha-percentage-circle>

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Percentage Circle page in the Figma UI Kit.

Dev Component	Design Component Name
Percentage circle	RUI / Percentage Circle

The Percentage Circle dev component comes in 3 sizes:

Large: 240 x 240
Medium: 120 x 120
Small: 80 x 80

The base design component uses the large size. If you’d like to use a medium or small size, resize the component to one of the sizes listed above.

While you can change the number displayed in the center, it would be extremely difficult to change the percentage that’s shown graphically, so it’s probably best to just use the percentage circle as-is.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Percentage Circle
Sample App - Progress Bar

Dev Component	Design Component Name
Percentage circle	JHA / Dashboard / Percentage Circle

The Percentage Circle dev component comes in 3 sizes:

Large: 240 x 240
Medium: 120 x 120
Small: 80 x 80

The base design component uses the large size. If you’d like to use a medium or small size, resize the component to one of the sizes listed above.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Sep 25 2024