Text + Chart Block
Display rich text alongside an interactive chart in a configurable side-by-side layout. Ideal for narrative documentation where data visualisation supports written analysis.
The Text + Chart block places rich text content alongside an interactive chart in a two-column layout. The text side supports full rich text editing (headings, lists, bold, links), while the chart side uses the same editor as the standalone Chart block. The layout direction and column ratio are configurable.
Example: Architecture Overview with Group Breakdown
Text on the left explains the model structure, while the donut chart on the right provides an at-a-glance visual summary.
Example: Governance Analysis with Classification Chart
Chart on the left shows the data classification breakdown, while the text on the right explains the compliance implications.
Example: Performance Trend with Analysis
A 60/40 split gives the chart more room for a multi-series line chart, while the narrower text column provides the key takeaways.
Example: Capacity Planning with Growth Projection
An area chart paired with planning narrative. The 40/60 split gives the text more room for the detailed analysis.
Example: Entity Profile with Relationship Chart
A horizontal bar chart showing the relationship count per connected entity, alongside a written profile of the Customer entity.
Layout Options
| Setting | Options | Description |
|---|---|---|
| Layout | text-left, text-right | Which side the text appears on |
| Split Ratio | 50-50, 40-60, 60-40, 33-67, 67-33 | Column width proportion |
| Vertical Align | top, center, bottom | Vertical alignment of shorter column |
Block Properties
| Property | Required | Description |
|---|---|---|
| Layout | Yes | text-left or text-right |
| Text Content | Yes | Rich text HTML for the text side |
| Chart | Yes | Full chart configuration (same as standalone Chart block) |
| Split Ratio | No | Column ratio (default: 50-50) |
| Vertical Align | No | Vertical alignment (default: center) |
When to Use
Related
- Chart Block - standalone chart without accompanying text
- Chart Row Block - multiple charts in a responsive row
- Split Content Block - two-column layout with image or diagram media instead of a chart