Components Charts

Charts

Data viz via ApexCharts (CDN-loaded). Charts are initialised from data- attributes — no Alpine components. Inline sparklines on stat cards are custom SVG, not Apex.

This page documents the ApexCharts chart pattern, driven by data-apex-chart attributes. There is no <koala-chart> tag helper.

Canonical

Fees this quarter

ApexCharts area chart rendered from data-chart-data. CDN script + JSON payload — no Alpine component.

Variants

5 variants

Sparkline

Inline SVG on stat cards. Custom-rendered, not ApexCharts.

Line

Trend over time. The most common shape.

Area

Cumulative volume, gradient fill.

Bar

Discrete totals per period.

Donut

Composition / share.

States

3 states

Loaded

Standard render.

Skeleton

Before data arrives.

No data for this period.

Empty

When series totals are zero.

Props

5 attributes

Attribute	Values	Notes
data-apex-chart	marker	Activates the ApexCharts renderer.
data-chart-data	JSON array	Required. Each point has `label`, `totalFees`, `referralFees`.
data-sparkline	JSON array of numbers	Activates the inline SVG sparkline renderer.
data-sparkline-color	CSS colour	Stroke colour for the sparkline path.
data-sparkline-title	string	Accessible label.

Working example

ApexCharts · SVG sparklines

New

24 +3

Accepted

18 +5

Expired

6 0

Cancelled

2 -1

Fees

Do & don't

Do Use dashed line + soft band for predicted segments. The reader can tell forecast from fact at a glance.

Don't Don't render banked + predicted as one solid line. The forecast becomes indistinguishable.