Widget Styling
Customize how widgets look with colors, formatting, and display options.
Accessing style options
Section titled “Accessing style options”Styling is in the Widget Settings section of the widget editor:
- Open the widget editor
- Select Widget Settings in the left panel
- Configure options in the right panel
- Preview changes in real-time in the center
General settings
Section titled “General settings”Widget title
Section titled “Widget title”| Option | Description |
|---|---|
| Title | Name displayed on the widget header |
| Show Title | Toggle title visibility |
| Description | Optional markdown description (shown in tooltips) |
Content widget styling
Section titled “Content widget styling”Static Value
Section titled “Static Value”- Display Mode: Text or Markdown
- Font Size: Override default text size
- Image URL: Link to a publicly hosted image
External Website
Section titled “External Website”- IFrame URL: Link to embed
Button
Section titled “Button”- Button Text: Label displayed
Colors
Section titled “Colors”Color types
Section titled “Color types”Choose how colors apply to your widget:
Default colors
Section titled “Default colors”- Follow the widget’s default palette
- Colors are assigned automatically to data layers
- Override per data layer in the layer configuration
Threshold colors
Section titled “Threshold colors”- Color values based on numeric thresholds
- Define rules like “red if less than 100, yellow if less than 500, green if greater than 500”
- Available for: Number, Line, Bar, Matrix, and Table widgets
- Threshold labels can reuse a shared prefix or suffix when all visible series use the same unit.
Configuring thresholds
Section titled “Configuring thresholds”-
Set Color Type to “Use threshold colors”
-
Click Configure Thresholds to open the threshold editor
-
Add threshold conditions with:
- Comparator: Choose ≥ (greater than or equal), ≤ (less than or equal), or = (equal)
- Value: The numeric threshold value
- Color: The color to apply when the condition matches
- Sound: Optional alert sound from your soundboard
- Repeat: Whether to loop the sound and how often (in seconds)
- Affect Color: Whether the threshold should change the widget color
-
Set global sound options:
- Allow Mute: Users can temporarily disable alert sounds
- Snooze Duration: How long to suppress alerts (in seconds)
Visual vs. sound comparators
Section titled “Visual vs. sound comparators”Each threshold condition has two independent comparators that control different behaviors:
| Comparator | Purpose | Default |
|---|---|---|
| Visual Comparator | Controls when the color is applied to widget values | ≥ (greater than or equal) |
| Sound Comparator | Controls when the alert sound triggers | ≤ (less than or equal) |
This separation lets you customize color logic independently from sound logic. For example:
- Color turns red when a value is ≥ 90 (high utilization warning)
- Sound plays when the value is ≤ 10 (critical low alert)
Both comparators support the same options: ≥ (greater than or equal), ≤ (less than or equal), or = (exactly equal). Change either dropdown in the threshold editor to customize the behavior.
Multi-set thresholds (Table and Matrix widgets)
Section titled “Multi-set thresholds (Table and Matrix widgets)”Table and Matrix widgets support multiple threshold sets for different columns or data layers:
Tables: Configure thresholds per column. Each numeric column can have its own set of rules.
Matrix: Configure thresholds per data layer. Each calculation in the matrix can have independent thresholds.
To add multiple sets:
- Click Add Threshold Set in the editor
- Select the column (tables) or data layer (matrix) to configure
- Add threshold conditions as needed
Threshold behavior by widget type
Section titled “Threshold behavior by widget type”Line Charts:
- Create color gradients based on threshold values using the visual comparator
- Thresholds define gradient stops along the line
Bar Charts:
- Bars matching a threshold’s visual comparator display the threshold color
- Bars without matching conditions keep their default gray color
Number/Matrix/Table:
- Values matching a threshold’s visual comparator display the threshold color
- Values without matching conditions keep their default color
- Use Show Threshold Markers to fill the background instead of just coloring the text
- Alert sounds trigger based on the sound comparator, independent of colors
Number formatting
Section titled “Number formatting”Format options
Section titled “Format options”| Option | Description | Example |
|---|---|---|
| Rounding | Decimal places (0-10) | 2 → 1,234.56 |
| % Suffix | Add percent sign | 85 → 85% |
| $ Prefix | Add dollar sign | 1234 → $1,234 |
| Abbreviate Numbers | Compact notation | 1,200 → 1.2K, 3,400,000 → 3.4M |
Applying formatting
Section titled “Applying formatting”Formatting options are in the Value Display section of widget settings.
Chart Widgets:
- Apply to data labels
- Control legend formatting
- Bar and line charts can override % suffix and $ prefix per data layer in Data Layer Settings
- Shared Y-axis and threshold labels only show a prefix or suffix when all visible series use the same one
Number Widgets:
- Apply to main value
- Apply to comparison values
Table Widgets:
- Apply to specific columns
- Set column-specific prefixes/suffixes
Matrix Widgets:
Matrix widgets support per-calculation formatting. This lets you apply % suffix, $ prefix, or number abbreviation to specific data layers only. See Creating Widgets for details.
Chart widget styling
Section titled “Chart widget styling”Legend & labels
Section titled “Legend & labels”| Setting | Description |
|---|---|
| Show Legend | Display chart legend |
| Legend Position | Top, bottom, left, or right |
| X Label | Custom X-axis label |
| Y Label | Custom Y-axis label |
| Data Labels | Show values directly on chart elements |
Axes configuration
Section titled “Axes configuration”| Setting | Description |
|---|---|
| Show X Axis | Toggle X-axis visibility |
| Show Y Axis | Toggle Y-axis visibility |
| Y Min | Fixed minimum value (blank = auto) |
| Y Max | Fixed maximum value (blank = auto) |
Scale options
Section titled “Scale options”| Setting | Description |
|---|---|
| Log Scale (Y) | Use logarithmic scale for Y-axis |
| Log Base | Base for logarithmic scale (default: 10) |
| Cumulative X Axis | Show running totals over time |
Line chart options
Section titled “Line chart options”| Setting | Description |
|---|---|
| Show Area | Fill area under the line |
| Fill Empty Points | Add zeros for missing time periods |
| X Axis Label Rotation | Rotate X-axis labels (degrees) |
| Overlay Current Number | Display latest value prominently |
Bar chart options
Section titled “Bar chart options”| Setting | Description |
|---|---|
| Horizontal Chart | Rotate to horizontal bars |
| Grouping | Stack bars or group by category |
| Bar Gap | Space between bars (pixels) |
| Hide Zero Labels | Hide zero-value data labels and tooltip rows for current-period points |
| Show Stack Total | Display total at top of stacked bars |
When Hide Zero Labels is on, bar chart tooltips also skip current-period series with a value of 0. Previous-period comparison entries still appear in the tooltip, even when that comparison value is 0.
Pie chart options
Section titled “Pie chart options”| Setting | Description |
|---|---|
| Pie Radius | Size of the pie (%) |
| Inner Radius | Create doughnut chart (set to 40 for standard doughnut) |
| Data Label Format | Value, percentage, label, or combinations |
| Hide Zero Labels | Hide labels for zero-value slices |
Gauge options
Section titled “Gauge options”| Setting | Description |
|---|---|
| Min Value | Scale minimum (default: 0) |
| Max Value | Scale maximum (default: 100) |
| Show Interval Labels | Display value labels along the gauge scale |
Time & grouping
Section titled “Time & grouping”Time configuration
Section titled “Time configuration”| Setting | Description |
|---|---|
| Time Increment | Group time-based data: minute, hour, day, week, month, quarter, year |
| Timezone | View data in any timezone |
Sorting & limits
Section titled “Sorting & limits”| Setting | Description |
|---|---|
| Sorting | Alphabetical, reverse alphabetical, highest, lowest |
| Group By Sorting | Sort order for grouped data |
| Value Limit | Maximum number of values to display |
Table widget styling
Section titled “Table widget styling”Table options
Section titled “Table options”| Setting | Description |
|---|---|
| Transpose Table Data | Swap rows and columns |
| Enable Drilldown | Show detailed data on click |
| Drilldown Date Format | Control date display in drilldown |
Transpose settings
Section titled “Transpose settings”When transpose is enabled:
| Setting | Description |
|---|---|
| Include Header | Show column names as first row |
| Header Column Name | Label for the header column |
| Transpose Column | Which column to use for headers |
| Pin Header Column | Keep header column fixed while scrolling |
Pivot settings
Section titled “Pivot settings”When pivot is enabled:
| Setting | Description |
|---|---|
| Pivot Columns | Columns to pivot (become new columns) |
| Pivot Values | Values to aggregate |
| Pivot Index | Columns to keep as rows |
| Aggregation Function | Sum, average, count, etc. |
| Pin Index Columns | Keep index columns fixed |
Column formatting
Section titled “Column formatting”| Setting | Description |
|---|---|
| Columns with $ Prefix | Apply dollar sign to specific columns |
| Columns with % Suffix | Apply percent sign to specific columns |
Comparisons
Section titled “Comparisons”Compare points
Section titled “Compare points”Show how current values compare to another value:
| Setting | Description |
|---|---|
| Compare Points | Enable value comparison |
| Comparison Type | Previous data point or custom value |
| Comparison Method | Percent change or absolute difference |
| Only Show In Label | Hide comparison in main display |
Previous period comparison
Section titled “Previous period comparison”For time-based widgets:
| Setting | Description |
|---|---|
| Compare With Previous Period | Compare to preceding time period |
| Compare Options | Previous Period or Period Last Year |
Requirements:
- Exactly one data layer
- Time-based filter (date range or filter variable)
Best practices
Section titled “Best practices”Color usage
Section titled “Color usage”- Consistency: Use the same colors for the same categories across widgets
- Meaning: Use color to convey information (red = bad, green = good)
- Accessibility: Ensure sufficient contrast for readability
Number formatting
Section titled “Number formatting”- Appropriate precision: Don’t show 6 decimal places for currency
- Abbreviate large numbers: Use K/M/B for readability
- Consistent units: Use same units across related widgets
Chart design
Section titled “Chart design”- Start at zero: For bar charts, always start Y-axis at zero
- Limit categories: Use 7 or fewer categories for pie charts
- Time on X-axis: Put time on horizontal axis for trends
- Clear labels: Use descriptive axis labels
Table design
Section titled “Table design”- Prioritize columns: Show most important columns first
- Limit rows: Use Value Limit to prevent overwhelming users
- Enable drilldown: Let users explore detailed data
- Format appropriately: Apply currency/percentage formatting