Charts
Grafik mewarisi warna dari skin yang sedang aktif dan hanya dirender di klien — ECharts menyentuh window saat dimuat, jadi render pertama di server selalu berupa kerangka, baru digantikan grafik sungguhan begitu terpasang di peramban.
Chart
Wraps ECharts (Apache-2.0) for six shapes: line, bar, area, donut, radial, and heatmap. Three things you can't see from the preview below: the chart only renders on the client — the server only draws the skeleton, ECharts loads (via a tree-shaken import, not the full bundle) only once mounted in the browser — its colors read from the currently active skin's tokens, so switching skins in the top right also changes the chart colors with no extra options, and the entrance animation is deliberately disabled on every chart — this template is sold as an application foundation, not a showpiece.
Line & area — daily ticket sales
Ticket sales (line)
Ticket sales (area)
<UiChart type="line" :series :categories />Bar — revenue per route
Revenue
Horizontal
Stacked
<UiChart type="bar" :series :categories horizontal stacked />Donut & radial — channel composition
Sales channels
Seat occupancy
<UiChart type="donut" :series :labels /> <UiChart type="radial" :series />Heatmap — occupancy per departure hour
Occupancy per hour, across the week
<UiChart type="heatmap" :series />States — loading and empty
Loading
No data yet
No sales yet this month
<UiChart loading /> <UiChart :series="[]" />| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'line' | 'bar' | 'area' | 'donut' | 'radial' | 'heatmap' | — | Required. |
| series | number[] | Array<{ name?, type?, data }> | — | Required. number[] for donut/radial, array of series for the rest. |
| series[].type | 'line' | 'bar' | 'area' | undefined | Overrides the chart type for THIS series only — used for mixed charts (e.g. bars + line in one chart, see /charts/mixed-heatmap). |
| categories | Array<string | number> | undefined | X-axis for line/bar/area/heatmap. |
| labels | string[] | undefined | Name of each slice for donut/radial. |
| stacked / horizontal | boolean | false | Bar only. |
| height | number | 320 | Canvas height in pixels. |
| options | ChartOptions | undefined | Raw ECharts options — wins over the base options, deep-merged (not a full override). See utils/chart.ts. |
| loading | boolean | false | Renders a skeleton, not the chart. |
| title / description | string | undefined | Readable heading outside the chart canvas. |
| emptyText | string | 'No data to plot' | Used when the series is empty — a chart with no data is a dashed empty box, not hidden. |
| label | string | undefined | Accessible name (aria-label). Empty falls back to title. |