Widget types reference

Genuics offers 18 widget types organized into four categories. This guide explains when to use each one, what data it needs, and a real-world example to get you started.

Single Value

These widgets display one number or a simple status. They're ideal for KPIs at the top of a dashboard.

Metric (KPI card)

When to use it: You want to highlight a single number with optional trend comparison.

What it needs: A dataset, a metric (e.g., count of responses), and optionally a date field for trend calculation.

Example: A card showing "4,231 survey responses this month" with a green "+12% MoM" footer.

The Metric widget supports summary headers (the big number) and trend footers (WoW, MoM, QoQ, YoY comparisons). It's the most common widget on any dashboard - most teams place a row of Metric cards across the top to give an at-a-glance status.

Gauge

When to use it: You want to show progress toward a target, or a score on a known scale.

What it needs: A dataset, a single metric, and a min/max range.

Variants:

• Half gauge - a semicircle, good for scores like NPS (-100 to 100) or CSAT (0 to 100).
• Full gauge - a full circle, useful for completion percentages (0 to 100%).

Example: A half gauge showing your current NPS score of 42 on a scale of -100 to 100, with color bands: red below 0, yellow 0-30, green above 30.

Spacer

When to use it: You want to add a visual break, a section header, or explanatory text between widgets.

Variants:

• Text spacer - displays a heading and optional body text. Use it to label groups of widgets ("Customer Satisfaction Metrics" above a row of charts).
• Empty spacer - a blank block that creates visual breathing room.

What it needs: No data. Spacers are purely presentational.

---

Comparison

These widgets compare values across categories. Use them when the question is "how does X compare to Y?"

Bar

When to use it: You want to compare discrete categories - products, regions, teams, rating buckets.

Variants:

• Vertical bar - categories on the X axis, values on the Y axis. The most common bar chart.
• Horizontal bar - categories on the Y axis. Better when category labels are long (like product names or department names).
• Stacked bar - segments within each bar show sub-categories. Good for showing composition - like how each region's total breaks down by product.
• Percent bar - like stacked, but each bar is normalized to 100%. Good for comparing proportions when absolute values differ.

What it needs: A metric, a dimension (the categories), and optionally a segmentation field (for stacked/percent).

Example: A vertical bar chart showing average CSAT score by support channel (email, chat, phone), segmented by priority level.

Pie

When to use it: You want to show parts of a whole - market share, category distribution, response breakdown.

Variants:

• Standard pie - a filled circle divided into slices.
• Donut - a pie with a hollow center. The center can display a total or summary value.

What it needs: A metric and a dimension. Best with 2-7 categories. More than that and the slices become hard to read - switch to a bar chart instead.

Example: A donut chart showing survey response distribution: 45% Promoters, 30% Passives, 25% Detractors, with "4,231 total" in the center.

Composed

When to use it: You want to overlay two different chart types - typically a bar and a line - to show related metrics on different scales.

What it needs: Two metrics (one rendered as bars, one as a line), a shared dimension (usually time), and optionally dual Y axes.

Example: A composed chart showing monthly revenue (bars, left Y axis) and customer count (line, right Y axis) to see if revenue growth is driven by more customers or higher spending.

---

Trends

These widgets show how values change over time. Use them when the question is "what's the trend?"

Line

When to use it: You want to track a metric over time - daily scores, weekly volumes, monthly growth.

Variants:

• Smooth - curved lines that look polished and are easy to follow.
• Straight - angular connections between data points. Better for precise readings.
• Step - staircase lines that emphasize discrete changes. Good for data that changes in jumps (like pricing tiers or status changes).

What it needs: A metric, a date dimension, and optionally a segmentation field to compare multiple series.

Example: A smooth line chart showing NPS score by week for the last 6 months, segmented by product line.

Area

When to use it: Similar to line charts, but the filled area beneath the line emphasizes volume or magnitude.

Variants:

• Stacked area - areas stack on top of each other to show how a total is composed over time.
• Gradient area - a single series with a gradient fill from the line down. Looks clean and works well for a single prominent metric.

What it needs: Same as a line chart - a metric, a date dimension, and optionally a segmentation field.

Example: A stacked area chart showing monthly support ticket volume by category (billing, technical, general), making it easy to see which category is growing.

Scatter

When to use it: You want to find correlations between two numeric fields, or spot outliers.

Variants:

• Standard scatter - dots plotted on X and Y axes.
• Bubble - dot size encodes a third variable (e.g., revenue). Bigger dots = bigger values.
• With trend line - adds a best-fit line to show the overall direction.

What it needs: Two numeric fields (one for each axis), and optionally a third field for bubble size and a category field for color-coding.

Example: A bubble scatter plot with "Response Time" on the X axis, "Satisfaction Score" on the Y axis, and bubble size representing ticket volume - revealing whether faster responses truly lead to happier customers.

---

Advanced

These widgets handle specialized visualizations for deeper analysis.

Table

When to use it: You want to see raw or aggregated data in rows and columns. Good for detailed drill-downs where charts don't provide enough precision.

What it needs: A dataset, and optionally specific columns to display. Tables support sorting, pagination, and inline conditional formatting.

Example: A table showing individual survey responses with columns for date, respondent, score, and open-ended comment - filtered to Detractors only.

Heatmap

When to use it: You want to spot patterns across two dimensions using color intensity.

Variants:

• Grid heatmap - rows and columns with colored cells. Good for time-based patterns (e.g., hour of day vs. day of week).
• Correlation heatmap - shows the correlation strength between multiple variables.

What it needs: Two dimensions and a metric. The metric determines the color intensity.

Example: A grid heatmap with day of week on the Y axis and hour of day on the X axis, colored by average response time - instantly showing that Monday mornings have the longest wait times.

Radar

When to use it: You want to compare multiple attributes of one or more items on a common scale.

What it needs: Multiple metrics or categories plotted as spokes on a radial chart.

Example: A radar chart comparing two product lines across five attributes: ease of use, reliability, performance, support quality, and value for money.

Quadrant (Magic Quadrant)

When to use it: You want to classify items into four groups based on two metrics - typically importance vs. performance, or effort vs. impact.

What it needs: Two numeric fields (one for each axis) and a category field for labeling items.

Example: A quadrant chart plotting customer feedback themes by "frequency mentioned" (X axis) vs. "impact on NPS" (Y axis), creating four zones: quick wins, major projects, low priority, and thankless tasks.

Box Plot

When to use it: You want to show the distribution of a numeric field - median, quartiles, and outliers.

What it needs: A numeric metric and a dimension to group by.

Example: A box plot showing distribution of response times by support agent, revealing that one agent has a tight consistent range while another has extreme outliers.

Tornado (Impact Drivers)

When to use it: You want to show which factors have the strongest positive and negative impact on a metric.

What it needs: A metric and a set of dimensions to evaluate as drivers.

Example: A tornado chart showing which survey questions have the most impact on overall NPS - with "Product Quality" as the strongest positive driver and "Wait Time" as the strongest negative driver.

Sankey (Flow Diagram)

When to use it: You want to visualize how values flow from one stage to another - customer journeys, conversion funnels, or category mappings.

What it needs: A source dimension, a target dimension, and a metric for flow thickness.

Example: A sankey diagram showing how customers flow from initial contact channel (web, email, phone) through support tiers (L1, L2, L3) to resolution outcomes (resolved, escalated, churned).

Map

When to use it: You want to show geographic distribution of your data.

Variants:

• Bubble map - circles on a map, sized by value. Good for showing concentrations.
• Choropleth - regions colored by intensity. Good for country-level or state-level comparisons.

What it needs: A geographic field (country, state, or coordinates) and a metric.

Example: A choropleth map showing average CSAT score by country, making it immediately clear that European markets are outperforming APAC.

Key Drivers

When to use it: You want AI-assisted analysis of which variables most strongly influence a target metric.

What it needs: A target metric (like NPS or CSAT) and a dataset with multiple fields to analyze.

Example: A key drivers widget revealing that "first response time" and "number of touchpoints" are the two strongest predictors of customer satisfaction in your support data.

Next steps

Now that you know what's available, learn how to add and configure widgets on your dashboard.