Radial Graph

Overview

Radial Graph shows a single percentage as a circular gauge, with a centered label and optional sub-label. It’s built from radial bars that fill and animate to represent the value, making it well suited to compliance scores, completion rates, and other at-a-glance metrics.

By default the label displays the rounded percentage, but you can override it with any text. The variant prop ties the color to a status (success, danger, warning), so the value’s meaning reads at a glance. For a simple linear bar, use Progress instead.

Usage

Import the component:

import { RadialGraph } from "@eqtylab/equality";

Basic usage — percentage is required:

<RadialGraph percentage={75} />

Labels

The center label defaults to the rounded percentage. Add a subLabel for context, or set displayLabel to replace the percentage text entirely.

Default

With Sub Label

Custom Display Label

Usage

<RadialGraph percentage={100} />
<RadialGraph percentage={75} subLabel="Compliant" />
<RadialGraph percentage={50} displayLabel="Halfway" subLabel="There" />

Graph Sizes

Three sizes are available; md is the default.

Small

Medium (default)

Large

Usage

<RadialGraph percentage={60} graphSize="sm" />
<RadialGraph percentage={60} graphSize="md" />
<RadialGraph percentage={60} graphSize="lg" />

Variants

The variant prop sets the fill color. Use primary (default) for a plain metric, or success/danger/warning to give the value meaning.

Primary (default)

Success

Danger

Warning

Usage

<RadialGraph percentage={60} variant="primary" />
<RadialGraph percentage={95} variant="success" />
<RadialGraph percentage={10} variant="danger" />
<RadialGraph percentage={50} variant="warning" />

Props