Examples
Right-aligned legend
The canonical PatternFly donut: vertical legend on the right, total in the centre via a rich-text label, no per-slice callouts.
Small
Dashboard-card size — the canvas is capped at 180px via inline style; the centre label scales down to match.
Small with bottom subtitle
The subtitle moves below the ring using a bottom-anchored title, leaving only the value in the centre.
Documentation
Chart wrapper props
Every chart uses the same wrapper —
{#include components/charts/chart id="..." /} with the ECharts
option supplied via Alpine
x-data="phaChart({ option: { ... } })" on the wrapping
<div>.
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id on the chart container. |
height
|
String |
Inline canvas height (e.g. 350px). Default 350px via
CSS.
|
slot content
|
Qute block | Optional title / toolbar rendered above the canvas. |
phaChart() options
Argument shape passed to the Alpine factory.
| Name | Type | Description |
|---|---|---|
option
|
Object | ECharts option object. See ECharts docs for the full schema. |
theme
|
String | Object |
Theme name or option. Defaults to the registered
patternfly theme.
|
renderer
|
"canvas" | "svg" |
Renderer. Default canvas.
|
autoResize
|
boolean |
Bind a window resize handler. Default
true.
|
loading
|
boolean |
Show ECharts loading spinner until the first setOption.
Default false.
|
Usage
Data lives in the Alpine x-data. The server renders the chart wrapper and an Alpine factory call with the ECharts option object inline; the browser only paints. Keep all data-shaping in your Quarkus route.
Live updates via HTMX. To re-render a chart, return an
x-data-bearing fragment from an
hx-get response and swap it in. The new Alpine instance will
replace the old chart cleanly because the wrapper's
destroy() disposes the ECharts handle.
Theming. Charts inherit the PF v6 palette via the registered
patternfly theme (see
/web/js/alpine/components/chart.js). Pass
theme: "dark" or your own theme name to override.