Examples
Segmented primary measure
The primary measure is split into stacked segments (committed vs. projected) on a measure stack overlaid on the range band via barGap: '-100%'.
Primary measure dot
A dot (scatter symbol) marks the current value instead of a bar — useful when the measure is a point-in-time reading rather than an accumulation.
Error measure and custom ticks
Grey whiskers mark the error bounds around each measure; the value axis uses a fixed interval and a percent-sign label formatter.
Negative and positive measures
The value axis crosses zero: negative range band and measures stack below zero on the same stack, so both signs share one row.
Reversed
Direction flipped with xAxis.inverse; category labels move to the right so the chart reads right-to-left.
Vertical with segmented measure
Axis-swapped orientation — categories on the x-axis, values on the y-axis — with the segmented measure overlay.
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.