Indicators

Indicators are compact, dynamic components that distill complex data into simple, visual metrics. They are most commonly used to represent Key Performance Indicators (KPIs) — essential values that help measure the performance, health, or progress of your business or system.

Unlike traditional charts, indicators focus on clarity, speed, and immediate insight, making them ideal for dashboards where glanceable information is key.

Whether you're displaying target vs. actual, highlighting trends, or simply showcasing a single metric, the indicators in Wyn offer powerful customization, responsive design, and seamless data integration.

Types of Indicators

Wyn Dashboards offers a variety of indicator components to meet different analytic and design goals:

Liquid Fill Gauge

The Liquid Fill Gauge is an eye-catching, animated indicator that fills a container (usually a circle) with a wave to visually represent progress toward a goal. Its unique style makes it particularly useful when you want to emphasize engagement or percentage-based completion.

Use when you want a creative, animated way to show % filled — like storage use or budget allocation.

Gauge

The Gauge resembles a speedometer, ideal for showing values on a scale with color-coded thresholds. It supports value ranges, tick marks, and alerts for performance zones (e.g., red, yellow, green).

Use when monitoring system metrics, risk scores, or any values that fall within a defined range.

Indicator

The basic Indicator component is designed for showing a single metric — such as a number or status — in a simple, clean format. Though minimalist, it can be styled with icons, font settings, and conditional formatting.

Use when highlighting one critical number like active users, incidents, or stock levels.

KPI Chart

A KPI Chart combines value representation with additional visuals like progress bars or comparison markers. It’s ideal for displaying actuals vs. targets and includes rich formatting and alerting options.

Use when visualizing deviation from a goal or showing layered KPI information in one chart.

KPI Kanban

The KPI Kanban displays key metrics as cards grouped into categories or statuses. Each card is customizable and can include metrics, icons, and styles that help organize data clearly and responsively.

Use when grouping KPIs by stage, department, region, or priority — great for workflows or dashboards with grouped insights.

Progress Bar

The Progress Bar is a linear visual that represents how much progress has been made toward a defined limit. It can be continuous or segmented, and oriented horizontally or vertically.

Use when visualizing % completion — like sales to quota, goal tracking, or daily progress updates.

KPI Card

The KPI Card is a streamlined component designed to show one or more values in a clean, bold format. You can customize it with icons, postfixes, and titles. It supports both static and data-bound values.

Use when showing high-level figures like revenue, conversion rate, or uptime in an elegant, unobtrusive way.

When to Use Indicators

Indicators are especially useful when:

You need real-time snapshots of important values
You want compact, low-friction visuals for dashboards
You’re creating a performance overview or executive summary
You want to design visually engaging metrics without full-scale charts