---
title: "Progress Widget"
description: "Components for visualizing numeric progress values as linear bars or circular rings."
group: Components
tags: [Progress, KPI, Chart, Ring, Bar, Circular, Target, Actual, Comparison]
---

import { Aside } from '@astrojs/starlight/components';

# Progress Widget

Progress widgets visually represent how a numeric value (actual) compares against a defined target. These are ideal for displaying KPIs, completion percentages, or performance metrics.

---

## 📊 Basic Configuration

| Configuration Item | Description |
|:------------------|:------------------------------------------------|
| **[Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources)** | The dataset providing values for actual and target measures. |
| **[Actual Measure](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Numeric value representing achieved or completed progress. |
| **[Target Measure](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Numeric value representing the total or goal to achieve. |
| **[Date](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** *(optional)* | Can be used to filter or contextualize the data over time. |

---

## 🎨 Widget Customizations

All progress widgets share these customization sections:

| Group       | Description |
|:------------|:------------|
| **[General](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#general)** | Modify the widget’s appearance — background, borders, shadows, and interactions. |
| **[Title](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#title)** | Customize title text, alignment, font, and color. |
| **Progress** | Define ring/bar properties, steps, actual/target labels, separators, icons, and measure formatting. |

---

## 📏 Progress Widget

A linear progress bar displaying actual vs target values as a horizontal bar.

**Key Features:**
- Supports custom bar colors and backgrounds.
- Optional thresholds (steps) to change colors based on value ranges.
- Position actual and target values with label formatting.
- Configurable separator and icon display.
- Adjustable value formatting (prefix, suffix, precision, percentage/value switch).

<Aside>
 Use for simple linear comparisons or progress tracking within a compact panel.
</Aside>

---

## 📊 Ring Progress Widget

A circular ring-based progress visualization comparing an actual value against a target.

**Key Features:**
- Customizable ring size, thickness, and cap style.
- Optional stepped coloring for thresholds.
- Independently position actual and target labels.
- Add separators and icons with flexible positioning.
- Format labels as value or percentage with precision and formatting options.

<Aside>
 Ideal for key metric displays like goal achievement, sales targets, or health scores.
</Aside>

---

<Aside>
  <strong>📚 When to Use Which?</strong>

  | Widget Type | Use Case |
  |:-------------|:------------------------------------------------|
  | **Progress Widget (Bar)** | For clear, compact, horizontal progress visualization. |
  | **Ring Progress Widget (Circular)** | For compact, dashboard-friendly KPI displays or when space is limited. |
</Aside>