Generic Chart¶
Creates data-driven visualizations supporting bar, line, column, and scatter chart types with extensive customization options for axes, styling, and legends.
Chart components · element type generic-chart · binds through a data source
Related: Pie Chart · ECharts · Legend Entry
Examples¶
Alt text for the chart
Revenue by month for {$params.year}Set as Alt text, so the chart is described in the exported PDF.
Options¶
Configure the Generic Chart component with these main sections:
| Option | Description |
|---|---|
| Series Configuration | Define data series with chart type, data source, and field mappings |
| Positioning | Control chart placement with top, left, right, bottom spacing |
| Grid Lines | Toggle horizontal and vertical grid line visibility |
| Axes | Configure X and Y axis appearance, labels, and formatting |
| Accessibility | Describe what the chart shows, for screen readers and the PDF tag tree |
| Styling | Set colors, fonts, and visual appearance |
| Legend Config | Control legend display, positioning, and formatting |
Accessibility¶
Alt text is the description a screen reader reads out, and the one that travels into the exported PDF's tag tree. It supports text templates, so it can name the measure and the period — Revenue by month for {$params.year}.
Left empty, the chart is still described — as simply "Chart" — so an export never contains an undescribed graphic. That keeps the document valid; it does not make it useful. A chart almost always carries meaning that its surrounding text does not repeat, so write a real description: say what it shows and what the reader should take from it, in one sentence.
Legend swatches need no description of their own. The coloured shape repeats what the legend text beside it already says, so it is marked as decoration and skipped.
Decorative, in the same section, skips the chart entirely for screen readers and marks it as decoration in the exported PDF. It disables Alt text, because the point is that there is nothing to say. Reserve it for charts that are purely ornamental — rare, since a chart usually carries the very information the reader needs.
Series Configuration¶
Configure individual data series through Series Configuration:
| Option | Description |
|---|---|
| Name | Series identifier displayed in legends |
| Chart Type | Line, Area, Bar, Column, Scatter, Range, or Marker Line visualization for this series |
| X1/X2/Y1/Y2 Field | Range series: bounds of the shaded region; Marker Line series: span limits. Any field left empty spans the full axis range |
| X Field / Y Field (Marker Line) | Field the line is drawn at — X for vertical, Y for horizontal lines |
| Data Source | Required - select data source for chart data. The buttons next to the field preview the rows, edit or create the data source, and open Transform data |
| X Field / Y Field / Y0 Field | Map data fields to chart axes (Y0 for area charts) |
| Transform data | Optional steps applied to this series' data before plotting: sort, limit, filter (including parameter-bound filters), computed columns, grouping with top N + Other, partitioning. Replaces the former Sort Field option; existing series sorting is converted into a sort step automatically |
| Legend Entry | Toggle series visibility in chart legend |
Series Styling¶
Customize individual series appearance:
| Option | Description |
|---|---|
| Line / Area | Toggle line or area display for line/area charts |
| Hidden Base / Auto Color / Stacked | Control series behavior and automatic styling |
| Line Color / Area Color | Set custom colors for series elements |
| Line Width | Control line thickness for line charts |
| Shape / Size | Configure data point markers for line and scatter charts |
| Size / Unit / Offset | Column/bar thickness and position along the axis. On a category axis, Size is a fraction of the category slot (default 0.5). On a time axis, pick a Unit (millisecond, second, minute, hour, day, week, month, quarter, year) and enter Size and Offset in that unit — e.g. 1 + Day for daily columns. Month, quarter, and year are fixed approximations (30, 91, and 365 days). The Unit field is enabled only when the series' axis is a time axis. |
Data Labels¶
Configure value display on chart points:
| Option | Description |
|---|---|
| Show | Toggle data label visibility |
| Placement | Position labels relative to data points (inside, outside, center, etc.) |
| Distance / Width / Height | Control label spacing and dimensions |
| Value Template | Custom formatting for data labels using text templates |
| Rectangle Style / Text Style | Apply custom CSS styling to label containers and text |
Chart Options¶
Control chart behavior and appearance:
| Option | Description |
|---|---|
| Auto Size | Automatically adjust chart dimensions |
| Show horizontal/vertical grid lines | Display grid lines for easier reading |
| Zero marker lines | Show axis zero reference lines |
| Clip Rect | Constrain chart elements to chart area |
Axis Configuration¶
Customize axis appearance for both horizontal and vertical axes:
| Option | Description |
|---|---|
| X Axis Type / Y Axis Type | Time, Category, or numeric axis types |
| Format | Display format for axis labels - see text formats |
| Label Orientation | Control label rotation and positioning |
| Label Anchor / Label Offset | Fine-tune label placement |
| Tick Size / Tick Offset | Configure axis tick marks |
| Label Style | Apply custom CSS styling to axis labels |
| Hide Labels / Hide Line / Hide Ticks | Control axis element visibility |
Styling and Colors¶
Customize visual appearance:
| Option | Description |
|---|---|
| Use Specific Color Map | Apply predefined color schemes |
| Color Map Name | Which map to use when the above is on. Match this across charts so a category keeps the same colour |
| Use Distant Colors | Automatic color selection for better contrast |
| Color 1-16 | Individual color settings for data series |
| Chart/Axis Labels Font Size | Typography control for labels |
| Guidelines Color/Width | Grid line appearance |
| Zero Marker Colors/Width | Zero line styling |
Legend Configuration¶
Control legend display and positioning:
| Option | Description |
|---|---|
| Legend Align / Legend Vertical Align | Position legend relative to chart |
| Hide Legend | Toggle legend visibility |
| Value Format | Format for legend values using text templates |
| Legend Items | Configure shape, size, spacing, and typography |
Swimlanes¶
Swimlanes draw horizontal bands behind the series, to separate categories or highlight ranges.
| Option | Default | Description |
|---|---|---|
| Show | Off | Draws the lanes |
| Lane Offset | Not set | Shifts the bands relative to the axis |
| Lane Class | Empty | CSS class applied to each band |
| Lane Style | Empty | Custom CSS applied to each band |
| Legend Margin / Legend Border | Control legend container styling |
Chart styling overrides theme settings for individual customization.
Notes¶
- Create data sources before configuring charts - they're required for all data visualization
- Use Series Configuration to add multiple data series with different chart types
- Apply custom colors through the styling section for brand consistency
- Configure axis formatting to match your data types (currency, percentages, dates)
- Use swimlanes for additional data grouping and organization