Chart Row Block
Display multiple charts in a responsive dashboard row. Each chart is independently configured and the row wraps gracefully on narrow viewports.
The Chart Row block arranges multiple charts in a responsive horizontal row. Each chart has its own configuration, type, and data. The row uses CSS flex-wrap, so charts reflow to the next line on smaller screens rather than overflowing.
Example: KPI Dashboard
Three gauge charts side by side, showing key compliance metrics at a glance. This is the pattern the narrative engine uses for governance coverage reports.
Example: Model Overview Dashboard
A four-chart row combining different chart types to give a comprehensive model overview. The donut shows group breakdown, the horizontal bar shows entity sizes, the stacked bar shows type composition, and the gauge shows documentation completeness.
Example: Performance Comparison
Two line charts side by side, comparing request latency and throughput across environments.
Example: Risk and Quality Summary
A two-chart row combining a donut for risk severity distribution with a horizontal bar for the top risk categories.
Block Properties
| Property | Required | Description |
|---|---|---|
| Charts | Yes | Array of chart items, each with its own independent chart configuration |
| Gap | No | Spacing between charts in pixels (default: 16) |
| Equal Height | No | Force all charts to the same height (default: true) |
| Height | No | Row height in pixels when equal height is enabled (default: 300) |
| Min Width (per chart) | No | Minimum width before wrapping to next line (default: 300px) |
When to Use
Related
- Chart Block - standalone chart for when a single chart is sufficient
- Text + Chart Block - pair explanatory text alongside a chart