Chart Block
Add interactive ECharts-powered charts to documentation pages. Supports bar, line, area, donut, gauge, and stacked bar charts with configurable data, palettes, and styling.
The Chart block renders interactive, SVG-based charts directly on content pages. Powered by ECharts, it supports seven chart types, five colour palettes, and manual data entry via a spreadsheet-style grid. Charts render identically in the editor preview, published sites, and PDF exports.
Chart Types
Each chart type is suited to a different data story. Choose the type that best communicates your data's meaning.
| Chart Type | Best For | Example Use Case |
|---|---|---|
| Vertical Bar | Comparing categories side by side | Entity count per group in a data model |
| Horizontal Bar | Ranking items, especially with long labels | Properties per entity, sorted by count |
| Line | Trends over time or sequential data | Sprint velocity over 12 sprints |
| Area | Cumulative or stacked trends | Cumulative test coverage across releases |
| Donut / Pie | Proportional breakdown of a whole | Governance classification distribution |
| Stacked Bar | Composition within each category | Property types per entity (string, number, boolean) |
| Gauge | Single percentage or KPI | Encryption coverage, test pass rate |
Example: Vertical Bar Chart
A vertical bar chart comparing entity counts across domain groups. Each bar is coloured individually for visual distinction.
Example: Horizontal Bar Chart
Horizontal bars work well when category labels are long. This example shows the top 10 entities ranked by property count.
Example: Line Chart
Line charts are ideal for showing trends. This example tracks sprint velocity and bug count over time with two series.
Example: Area Chart
Area charts emphasise volume and accumulation. This example shows cumulative test coverage across four releases.
Example: Donut Chart
Donut charts show proportional breakdowns. This example visualises the governance classification distribution across all model properties.
Example: Stacked Bar Chart
Stacked bars show composition within each category. This example breaks down property types per entity.
Example: Gauge Chart
Gauges display a single percentage or KPI. Colour changes automatically: green above 80%, amber between 50-80%, red below 50%.
Colour Palettes
Five palettes are available. The default palette uses the NeoArc brand colours. Each palette is designed for a different visual context.
| Palette | Character | Best For |
|---|---|---|
| Default | Indigo-led, balanced mix of distinct hues | General-purpose charts, most documentation |
| Warm | Amber, orange, red, rose tones | Emphasis, alerts, governance and risk data |
| Cool | Blue, cyan, teal, green tones | Technical metrics, performance data, calm visuals |
| Monochrome | Single hue (indigo) with lightness variation | Print-friendly output, formal reports, PDF exports |
| Custom | User-defined hex colours | Brand-specific or client-facing documentation |
Palette Comparison
The same data rendered with each built-in palette.
Multi-Series Charts
Bar, line, and area charts support multiple series. Each series gets its own colour from the palette. The legend activates automatically when more than one series is present.
Block Properties
| Property | Required | Description |
|---|---|---|
| Chart Type | Yes | One of: bar-vertical, bar-horizontal, line, area, donut, stacked-bar, gauge |
| Title | No | Chart heading displayed above the chart |
| Labels | Yes | Category labels for the x-axis (or pie segments) |
| Series | Yes | One or more named data series, each with a values array |
| Show Legend | No | Display the legend (default: true, auto-enabled for multi-series) |
| Show Values | No | Display data values directly on the chart (default: false) |
| Colour Palette | No | One of: default, warm, cool, monochrome, custom |
| Custom Colours | No | Array of hex colour strings (only when palette is 'custom') |
| X-Axis Label | No | Label for the horizontal axis |
| Y-Axis Label | No | Label for the vertical axis |
| Height | No | Chart height in pixels (default: 350) |
When to Use
Best Practices
Related
- Chart Row Block - display multiple charts in a responsive dashboard row
- Text + Chart Block - pair narrative text alongside a chart
- Model Narrative Reports - auto-generated charts from model data