Widget Styling

Customize how widgets look with colors, formatting, and display options.

Accessing style options

Styling is in the Widget Settings section of the widget editor:

1. Open the widget editor
2. Select Widget Settings in the left panel
3. Configure options in the right panel
4. Preview changes in real-time in the center

---

General settings

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

Static Value

• Display Mode: Text or Markdown
• Font Size: Override default text size

Image

• Image URL: Link to a publicly hosted image

External Website

• IFrame URL: Link to embed

Button

• Button Text: Label displayed

---

Colors

Color types

Choose how colors apply to your widget:

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

• 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

1. Set Colors to Use threshold colors

2. Click Configure Thresholds to open the threshold editor dialog

3. 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

4. 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

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.

Tip

The threshold editor shows a live preview as you configure rules. Table/matrix widget cells will keep their default appearance if they don’t match any threshold. Line and bar widgets will have a default gray color if no threshold rules are matched, to avoid this make sure you cover all possible values by using multiple thresholds (≤ 50 red + ≥ 51 green)

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:

1. Click Add Threshold Set in the editor
2. Select the column (tables) or data layer (matrix) to configure
3. Add threshold conditions as needed

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

Gauge:

• Progress ring and pointer matching a threshold’s visual comparator display the threshold color
• Values without matching conditions use the threshold set’s default (bottom) color
• Alert sounds trigger based on the sound comparator, independent of colors

---

Number formatting

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Setting	Description
Columns with $ Prefix	Apply dollar sign to specific columns
Columns with % Suffix	Apply percent sign to specific columns

---

Comparisons

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

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

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

• 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

• 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

• 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

---

Related topics

• Creating Widgets
• Chart Types
• Widget Calculations