Generic Chart¶
The Generic Chart component creates data-driven visualizations supporting bar, line, column, and scatter chart types with extensive customization options for axes, styling, and legends.
Configuration¶
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 |
| Styling | Set colors, fonts, and visual appearance |
| Legend Config | Control legend display, positioning, and formatting |
Series Configuration¶
Configure individual data series through Series Configuration:
| Option | Description |
|---|---|
| Name | Series identifier displayed in legends |
| Chart Type | Line, Area, Bar, Column, or Scatter visualization for this series |
| Data Source | Required - select data source for chart data |
| X Field / Y Field / Y0 Field | Map data fields to chart axes (Y0 for area charts) |
| Sort Field | Field used for data ordering within series with ascending/descending options |
| 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 |
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 |
| 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 |
| Legend Margin / Legend Border | Control legend container styling |
Chart styling overrides theme settings for individual customization.
Use Cases¶
- Multi-series comparisons - display multiple data sets on the same chart for comparative analysis
- Time series tracking - monitor data changes over time with line or column charts
- Performance dashboards - create business metrics visualizations with custom formatting
- Data correlation - use scatter plots to identify relationships between variables
- Mixed chart types - combine different visualization types in a single chart
Tips¶
- 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