Examples
Horizontal
Orientation swap: categories on the y-axis, values on the x-axis. Everything else matches the basic stack.
Monthly data
A year of bandwidth by device class. The tooltip uses valueFormatter to append units to every series row.
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.