Examples
Alerts timeline
Horizontal severity-stacked alert counts per day. PF v6 status tokens override the palette: danger, warning, info.
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.