Format Panel
The Format panel controls the visual presentation of the selected component. It is context-aware: the available sections change based on which component type is selected. The panel is divided into named sections that can be expanded or collapsed. Changes apply live to the canvas preview.
Panel sections
| Section | Available for |
|---|---|
| Title | All components |
| Typography | Table, matrix, KPI card, slicer |
| Number format | All numeric value fields |
| Colors | All components |
| Layout / spacing | All components |
| Borders | Table, matrix, KPI card |
| Axes | Chart, combo chart, scatter, cash flow, EV |
| Legend | Chart, combo chart, scatter, gantt |
| Data labels | Chart, combo chart, KPI card |
| Conditional formatting | Table, matrix |
| Gridlines | Chart, gantt |
Number formats
Configure how numeric values are displayed across the component:
| Format | Syntax / description |
|---|---|
| Integer | No decimal places. Thousands separator optional. |
| Decimal | Fixed decimal places (0–6). |
| Percentage | Multiplies by 100 and appends "%". Decimals configurable. |
| Currency | Prepends a currency symbol. Symbol configurable (£, $, €, AED, etc.). |
| Abbreviated | Automatically abbreviates large numbers: 1,000 → 1K; 1,000,000 → 1M; 1,000,000,000 → 1B. |
| Custom | Enter a format string using Excel-style syntax, e.g. #,##0.00"m" for meters. |
| Date | Format date fields: dd/MM/yyyy, MMM yyyy, yyyy-MM-dd, or custom. |
| Duration | Format numeric duration as days, weeks, or Xd Xh style. |
Typography
| Property | Options |
|---|---|
| Font family | Select from report theme fonts or override with a custom font. |
| Font size | Point size (6–72pt). |
| Font weight | Normal, semibold, bold, extra-bold. |
| Font style | Normal, italic. |
| Text decoration | Underline, strikethrough, none. |
| Text color | Hex color picker or palette selection. |
| Alignment | Left, center, right, justify (horizontal); top, middle, bottom (vertical for table cells). |
| Line height | Multiplier (e.g., 1.2×, 1.5×). |
| Text overflow | Clip, ellipsis (...), or wrap. |
Typography settings can be applied at the component level (affects all text in the component) or overridden at the column/series/group level.
Colors
| Property | Description |
|---|---|
| Series colors | Color per data series or category. Edit individually or apply a preset color scheme. |
| Background color | Background fill of the component container. |
| Alternate row color | Second row background for alternating-row tables and matrices. |
| Header background | Column header background color. |
| Positive / negative colors | For waterfall, variance indicators, and delta arrows. |
| Color schemes / presets | Built-in palettes: Corporate, Vibrant, Earth, Cool, Warm, Monochrome, and custom. |
Layout and spacing
| Property | Description |
|---|---|
| Width / Height | Component dimensions on the canvas in pixels or percentage of the canvas width. |
| Padding | Inner spacing between the component border and its content (top, right, bottom, left). |
| Margin | Outer spacing between this component and adjacent components. |
| Row height | Fixed row height for tables. |
| Column width | Per-column width for tables: auto, fixed pixels, or percentage. |
| Gap | Space between items in KPI multi-card grid layouts. |
Borders
| Property | Description |
|---|---|
| Border visibility | Toggle each side: top, right, bottom, left. |
| Border color | Hex color for each border side (can differ per side). |
| Border width | Pixel thickness. |
| Border style | Solid, dashed, dotted, double. |
| Cell borders | For tables: outer border, inner horizontal, inner vertical, or header-only. |
| Corner radius | Rounded corners on the component container. |
Axes (chart components)
| Property | Description |
|---|---|
| Axis title | Text label for each axis. |
| Axis title font | Size, weight, color. |
| Axis min / max | Force a specific range or leave on auto-scale. |
| Tick interval | Force a fixed tick spacing or leave on auto. |
| Label format | Number format applied to axis tick labels. |
| Label angle | Rotation for X axis labels: 0°, 45°, 90°. |
| Label density | Show every Nth label to reduce crowding. |
| Gridline color | Color for major and minor gridlines. |
| Gridline style | Solid, dashed, dotted. |
| Log scale | Enable for wide-range value axes. |
Formatting sequence (recommended)
- Bind the component's data fields first.
- Confirm the story the data tells is correct.
- Set title and axis/column labels.
- Apply number formats.
- Adjust layout: width, height, padding.
- Set typography: font size, weight, alignment.
- Set colors and borders.
- Apply conditional formatting last.
Related
- Fields and Build Panel — data binding
- Filters Panel — data scoping
- Table Component — conditional formatting detail