Chart Types
This guide helps you choose the right widget for your data.
Data visualization widgets
Section titled “Data visualization widgets”Bar Chart
Section titled “Bar Chart”Best for: Comparing categories or showing rankings
Bars can be vertical (default) or horizontal.
| Configuration | Description |
|---|---|
| X-Axis | Categories to compare |
| Y-Axis | Values to plot |
| Grouping | Stack bars or group by category |
| Horizontal Mode | Rotate to horizontal bars |
| Bar Gap | Space between bars (pixels) |
| Threshold Colors | Color bars based on values |
Use cases:
- Sales by product
- Tickets by status
- Revenue by region
- Top 10 customers
Line Chart
Section titled “Line Chart”Best for: Tracking trends over time
Connect data points with lines to show change.
| Configuration | Description |
|---|---|
| X-Axis | Time or sequence field |
| Y-Axis | Values to track |
| Show Area | Fill area under the line |
| Multiple Series | Compare multiple data layers |
| Gradient Thresholds | Color based on value ranges |
| Overlay Current Number | Show latest value prominently |
Use cases:
- Revenue trends over months
- Ticket volume over time
- Website traffic patterns
- Performance monitoring
Pie Chart
Section titled “Pie Chart”Best for: Part-to-whole relationships (few categories)
Proportions as slices of a circle.
| Configuration | Description |
|---|---|
| Value | Size of each slice |
| Label | Category names |
| Pie Radius | Size of the pie (%) |
| Inner Radius | Create doughnut chart (set to 40) |
| Data Label Format | Value, percentage, label, or combinations |
| Sorting | Control slice order |
Use cases:
- Revenue by product (top 5)
- Ticket distribution by status
- Customer segments
- Budget allocation
Best for: Detailed data exploration
Spreadsheet-style grid with sorting and filtering.
| Configuration | Description |
|---|---|
| Columns | Fields to display |
| Column Selection | Show/hide specific columns |
| Transpose | Swap rows and columns |
| Pivot | Create cross-tabulated summaries |
| Sorting | Default sort column and direction |
| Value Limit | Maximum rows to display |
| Drilldown | Click to see full underlying data |
| Date Format | Control date display |
Use cases:
- Transaction lists
- Customer details
- Inventory reports
- Ticket queues
Number
Section titled “Number”Best for: Single KPI values with impact
One large, bold number.
| Configuration | Description |
|---|---|
| Value | The aggregated metric |
| Formatting | $ prefix, % suffix, abbreviate numbers |
| Thresholds | Color based on value ranges |
| Comparisons | Show change from previous period or custom value |
| Rounding | Decimal places (0-10) |
Use cases:
- Total revenue
- Customer count
- Average order value
- Open tickets
- SLA compliance %
Best for: Progress toward a numeric goal
A value on a radial scale. Supports one or two data layers.
| Configuration | Description |
|---|---|
| Value | Current value (Data Layer 1) |
| Min Value | Scale minimum (default: 0) |
| Max Value | Scale maximum (default: 100), used as fallback |
| Dynamic Max | Optional second data layer drives max value from dataset data |
| Color Zones | Threshold-based coloring of the progress ring and pointer |
| Live Updates | Real-time data refresh |
Two data layer mode:
Add a second data layer to drive the maximum value dynamically:
- Data Layer 1 (Current Value): The value displayed on the gauge
- Data Layer 2 (Maximum Value): Calculates the max scale from live data
When the second layer returns data, the gauge uses it as the maximum. When it has no data, the static Max Value setting is used as a fallback. If the dynamic max is below the minimum, the static max is used instead.
Use cases:
- SLA compliance percentage
- Quota attainment against a dynamic target
- Capacity utilization with changing total capacity
- Goal progress with variable goals
Matrix
Section titled “Matrix”Best for: Multi-metric scorecards
Multiple KPIs for each entity in a grid.
| Configuration | Description |
|---|---|
| Rows | Entities (e.g., employees, products) |
| Columns | Metrics/KPIs to display |
| Multiple Calculations | Add several data layers |
| Threshold Colors | Color-code values per metric |
| Row Sorting | Sort by any metric |
Use cases:
- Employee performance dashboard
- Product metrics overview
- Regional KPI comparison
- Team scorecards
Funnel
Section titled “Funnel”Best for: Visualizing conversion stages
Progression through stages with drop-off.
| Configuration | Description |
|---|---|
| Stages | Categories representing funnel steps |
| Values | Count or amount at each stage |
| Sorting | Ascending or descending |
| Data Labels | Show values on chart |
| Color Zones | Different colors per stage |
Use cases:
- Sales pipeline
- Conversion funnel
- Hiring pipeline
- Customer journey
Query Widget
Section titled “Query Widget”Best for: Custom SQL queries over a single source
Write YAML and SQL to build tables, charts, or metrics. Query Widgets use one source (a Dataset or Query Dataset) and a read-only Widget Query. See Query Widgets and Query Widget YAML.
| Configuration | Description |
|---|---|
| Source | Dataset or Query Dataset |
| Widget Query | Read-only SQL selecting from source |
| Display | Render as table, bar, line, pie, metric, gauge, or funnel |
| Parameters | Optional Filter Variable bindings |
| Drilldown | Optional detailed rows query |
Use cases:
- Complex aggregations not covered by standard functions
- Queries over a reusable Query Dataset
- Parameterized dashboards with Filter Variables
Content widgets
Section titled “Content widgets”Static Value
Section titled “Static Value”Best for: Custom text and documentation
Formatted text using plain text or Markdown.
| Configuration | Description |
|---|---|
| Display Mode | Text or Markdown |
| Content | Your text or markdown |
| Font Size | Override default size |
In Markdown mode, the content stays centered in the widget. If it runs longer than the available space, you can still scroll through it even though the scrollbar is hidden.
Use cases:
- Dashboard instructions
- Data definitions
- Announcements
- Section headers
Dynamic Value
Section titled “Dynamic Value”Best for: Displaying live text from data
Pull a single value from your dataset. Unlike Number widgets, Dynamic Value can display text and doesn’t aggregate.
| Configuration | Description |
|---|---|
| Dataset | Source of data |
| Column | Which column to display |
| Formatting | $ prefix, % suffix, abbreviate |
Use cases:
- Latest status update
- Most recent comment
- Current assignment
- Top performer name
Best for: Static visual content
Logos, diagrams, or any image from a URL.
| Configuration | Description |
|---|---|
| Image URL | Link to a publicly hosted image |
| Auto-size | Fit within widget bounds |
Use cases:
- Company logo
- Dashboard branding
- Explanatory diagrams
- Data flow charts
External Website
Section titled “External Website”Best for: Embedding third-party content
Embed any web page in your dashboard.
| Configuration | Description |
|---|---|
| IFrame URL | Link to external site |
Only embed content from trusted sources. External sites can execute JavaScript.
Use cases:
- Third-party dashboards
- Live documentation
- External reports
- Web applications
Button
Section titled “Button”Best for: Navigation and actions
Clickable buttons that navigate to dashboards or external links.
| Configuration | Description |
|---|---|
| Button Text | Label displayed on button |
| Mode | Dashboard link or external URL |
| Target | Dashboard to open or URL to visit |
Use cases:
- Navigate between related dashboards
- Link to external resources
- Quick action buttons
- Dashboard menus
Choosing the right widget
Section titled “Choosing the right widget”Decision guide
Section titled “Decision guide”| Your goal | Recommended widget |
|---|---|
| Single KPI/metric | Number |
| Progress to goal | Gauge |
| Compare categories | Bar Chart |
| Track trends over time | Line Chart |
| Part-to-whole (few items) | Pie Chart |
| Detailed records | Table |
| Multiple metrics per entity | Matrix |
| Conversion pipeline | Funnel |
| Custom SQL queries | Query Widget |
| Latest value/text | Dynamic Value |
| Custom text/docs | Static Value |
| Logo/branding | Image |
| Third-party content | External Website |
| Navigation | Button |
Best practices
Section titled “Best practices”- Keep it simple: Choose the simplest widget that tells your story
- Limit categories: Pie charts work best with 5 or fewer categories; use bar charts for more
- Time on X-axis: Always put time on the horizontal axis for trends
- Start at zero: For bar charts, start the Y-axis at zero
- Use color purposefully: Color should add meaning, not decoration
- Multiple metrics: Use Matrix for comparing several KPIs across entities
- Text content: Use Static Value for documentation, Dynamic Value for live data
When to use multiple data layers
Section titled “When to use multiple data layers”Add multiple layers when you want to:
- Compare current vs. previous period
- Show multiple metrics on the same chart
- Compare different regions or categories
- Overlay targets on actual performance