Chart cards
ApexCharts charts placed inside a card. acun:card and acun:chart are used together for monthly comparisons, ratios and trends.
Bar chart
acun:chart takes the ApexCharts settings from the options array (chart, series, xaxis, colors …). The toolbar is off by default, the font is taken from the page, and the colors adapt to the dark theme automatically. registerChart must be set up on the JS side.
<acun:card title="Monthly orders" subtitle="Last 6 months">
<acun:chart :height="260" :options="[
'chart' => ['type' => 'bar'],
'series' => [['name' => 'Orders', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]], ['name' => 'Returns', 'data' => [240, 198, 221, 260, 190, 214]]],
'xaxis' => ['categories' => ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']],
'colors' => ['primary', '#e5e7eb'],
'plotOptions' => ['bar' => ['borderRadius' => 4, 'columnWidth' => '45%']],
'dataLabels' => ['enabled' => false],
'legend' => ['position' => 'top', 'horizontalAlign' => 'left'],
]" />
</acun:card>| Prop | Values |
|---|---|
options | ApexCharts settings (array) |
height | Pixels; default 280 |
Ratio gauge
To show a single ratio, use the radialBar type; series takes a single percentage value. The size of the text in the middle is set with plotOptions.
<acun:card title="On-time delivery" subtitle="September 2026">
<acun:chart :height="260" :options="[
'chart' => ['type' => 'radialBar'],
'series' => [94],
'labels' => ['On time'],
'colors' => ['primary'],
'plotOptions' => ['radialBar' => ['hollow' => ['size' => '62%'], 'dataLabels' => ['value' => ['fontSize' => '28px', 'fontWeight' => 600]]]],
]" />
</acun:card>| Prop | Values |
|---|---|
chart.type | bar | line | area | radialBar | donut … |
Trend chart
The area or line type suits change over time. stroke.curve smooths the line, and fill fills the area below it with a gradient.
<acun:card title="Weekly visitors" subtitle="Last 8 weeks">
<acun:chart :height="240" :options="[
'chart' => ['type' => 'area'],
'series' => [['name' => 'Visitors', 'data' => [612, 640, 598, 702, 688, 731, 745, 760]]],
'xaxis' => ['categories' => ['Wk 1', 'Wk 2', 'Wk 3', 'Wk 4', 'Wk 5', 'Wk 6', 'Wk 7', 'Wk 8']],
'colors' => ['primary'],
'stroke' => ['curve' => 'smooth', 'width' => 2],
'dataLabels' => ['enabled' => false],
'fill' => ['type' => 'gradient', 'gradient' => ['opacityFrom' => 0.35, 'opacityTo' => 0.05]],
]" />
</acun:card>| Prop | Values |
|---|---|
stroke.curve | smooth | straight | stepline |
fill.type | solid | gradient |
In a stat card
Put a small chart in the default slot of acun:stat-card to show the trend of the number. chart.sparkline removes the axes and margins; keep the height low.
<div class="grid gap-4 sm:grid-cols-2">
<acun:stat-card label="Orders this month" value="3,106" icon="shopping-bag" color="success" :change="12.5" change-label="vs. last month">
<acun:chart :height="60" :options="[
'chart' => ['type' => 'area', 'sparkline' => ['enabled' => true]],
'series' => [['name' => 'Orders', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]]],
'colors' => ['success'],
'stroke' => ['curve' => 'smooth', 'width' => 2],
]" />
</acun:stat-card>
<acun:stat-card label="Returns" value="214" icon="receipt-refund" color="warning" :change="-4" change-label="vs. last month">
<acun:chart :height="60" :options="[
'chart' => ['type' => 'bar', 'sparkline' => ['enabled' => true]],
'series' => [['name' => 'Returns', 'data' => [240, 198, 221, 260, 190, 214]]],
'colors' => ['warning'],
'plotOptions' => ['bar' => ['borderRadius' => 2, 'columnWidth' => '55%']],
]" />
</acun:stat-card>
</div>| Prop | Values |
|---|---|
chart.sparkline | ['enabled' => true] |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
options | [] | ApexCharts settings; written over the default chart.height, toolbar and fontFamily values |
height | 280 | Chart height (px) |
card: title, subtitle | null | Card title; the other card props are on the Basic card page |