Chart Component
The Chart component covers the most commonly used visual patterns in project reporting: bars, lines, pies, areas, and their stacked and grouped variants. A single Chart component supports all twelve standard variants through the chart type selector in the Properties panel, making it straightforward to change the visual without rebuilding the data binding.
Chart variants
| Variant | Best for |
|---|---|
| Bar (vertical) | Comparing categories side by side. Default chart type. |
| Bar (horizontal) | Long category labels or ranked comparisons. |
| Stacked bar | Showing category totals broken down by a series dimension. |
| Grouped bar | Comparing two or more series within each category. |
| 100% stacked bar | Showing proportion of each series within a category, ignoring total size. |
| Line | Trends over time. Highlights rate of change. |
| Area | Trends over time where the filled area emphasises volume. |
| Stacked area | Volume trends for multiple series stacked to show a combined total. |
| Pie | Simple part-to-whole proportions (use with ≤6 categories). |
| Donut | Same as pie with a centre area for a headline metric. |
| Scatter | Correlations and outliers between two numeric fields. |
| Histogram | Distribution of a numeric field in configurable buckets. |
Required setup
| Property | Description |
|---|---|
| Category / date field | Field used for the X axis (bar, line, area) or slice labels (pie, donut). |
| Value field | The numeric measure to plot. Multiple value fields create multiple series. |
| Aggregation | How multiple rows with the same category become one plotted point: Sum, Average, Count, Min, Max, or Custom expression. |
| Series (legend) field | Optional field to split the value into multiple series per category. |
Dual-axis setup
To plot two measures on different scales (e.g., count on the left axis and percentage on the right):
- Add both value fields to the series list.
- For the secondary series, set Axis to Right in the series settings.
- Configure each axis independently (range, label format, gridlines).
Dual-axis is available on Bar, Grouped Bar, Line, and Area variants.
Trend lines and reference lines
Trend lines
Overlay a best-fit line on a scatter or line chart to indicate the trend direction:
| Trend type | Description |
|---|---|
| Linear | Straight-line least-squares regression. |
| Moving average | Rolling average over N preceding periods (configurable window). |
Reference lines
Add horizontal or vertical reference lines to mark a target, threshold, or baseline:
| Property | Description |
|---|---|
| Axis | Which axis the reference line is drawn on (X or Y). |
| Value | Fixed numeric value or a field reference for a dynamic value. |
| Label | Text shown at the line (e.g., "Target", "Budget"). |
| Style | Solid, dashed, or dotted. |
| Color | Custom hex color. |
Data labels
Enable data labels to show plotted values on the chart itself. Configurable positions:
| Position | Available on |
|---|---|
| Above | Bar, grouped bar |
| Inside top | Bar, stacked bar |
| Inside center | Bar, stacked bar |
| Inside base | Bar, stacked bar |
| Outside end | Bar, horizontal bar |
| On point | Line, area |
| Above point | Scatter |
| Inside slice | Pie, donut |
| Outside slice | Pie, donut |
For stacked charts, data labels can be shown per segment, on the total, or both.
Format: Data labels follow the same number format as the axis (configurable as percentage, number, currency, or custom format string).
Pie and donut: Auto "Other" grouping
When a pie or donut has more than the configured maximum number of slices (default 8), all remaining categories are automatically merged into an "Other" slice. Configure the threshold and the "Other" label text in the series settings.
Null / missing value handling
When a data point has no value for a period or category:
| Mode | Behaviour |
|---|---|
| Zero | Treats null as zero. Maintains chart continuity. |
| Gap | Leaves a visual gap at the null position. Suitable for line charts where missing data should not be interpolated. |
| Connect | Connects the surrounding data points with a straight line, omitting the null. Suitable for sparse data. |
Axis options
| Axis option | Description |
|---|---|
| Title | Text label for the axis. |
| Min / Max | Force a fixed axis range. Leave blank for auto-scale. |
| Step / interval | Force a fixed tick interval. |
| Label density | Reduce crowding by showing every Nth label. |
| Label angle | Rotate labels (0°, 45°, 90°) for long category names. |
| Gridlines | Show/hide major and minor gridlines with configurable color and style. |
| Log scale | Use logarithmic scale for wide value ranges. |
Custom tooltips
Customise which fields appear in the hover tooltip:
- In Properties → Tooltip, add or remove fields from the tooltip field list.
- Each field is shown with its label and formatted value.
- Fields not in the chart binding can still be added to the tooltip (e.g., show "Activity ID" on a bar chart grouped by discipline).
Related
- Combo Chart — bars and lines on the same chart
- Advanced Charts — scatter, waterfall, treemap, funnel
- KPI Card — headline numeric display
- Slicers and Filters — interactive filtering on chart data