Chart card
Show a chart with its title and key number; the card keeps its space while loading and says when the result is empty or an update failed.
Average receipt
-5.8%, worsevs August
€46.16
<script setup lang="ts">import { UiChartCard, UiDelta, UiSparkline, useUiT } from 'grani' const { n } = useUiT() const cents = (v: number) => n(v, { style: 'currency', currency: 'EUR' }) // A receipt is read to the cent; its year is only a trend under it.const RECEIPT = [44.1, 45.3, 49.8, 47.2, 45.9, 46.4, 47.9, 48.6, 47.1, 48.3, 48.99, 46.16]</script> <template> <UiChartCard title="Average receipt" :value="RECEIPT[11]!" :format="cents" bleed="full" class="w-full max-w-xs" > <template #actions> <UiDelta :current="RECEIPT[11]!" :previous="RECEIPT[10]!" label="vs August" /> </template> <UiSparkline :values="RECEIPT" variant="area" :endpoint="false" :height="64" ariaLabel="Average receipt, the last 12 months" /> </UiChartCard></template>
Also called kpi card, stat card, metric card.
Usage
<UiChartCard :title="title">…</UiChartCard> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| State | ||
| loadingboolean= false | false | Data is on its way: a skeleton while there is none yet, the chart dimmed over data already shown. |
| emptyboolean= false | false | There is no data to draw: with loading it is the first load, without it #empty. |
| errorstring | null= null | null | Why the data did not load, in words for the reader, shown with Retry; an empty string fails with a general reason. Over a chart already shown: "Not updated" on the title line. |
| Behavior | ||
| title*string | What the chart shows: "Spending and income by month". | |
| descriptionstring= "" | "" | One line under the title: what is counted, what is left out. |
| valuestring | number | null | A headline over the chart, a total: a number in format, or text already written. null keeps its line while it loads, and blank while there is nothing to draw. | |
| captionstring | null | A line under the headline: the shares, the span it covers. null keeps its line as value does. | |
| formatChartFormat= "number" | "number" | How a number value reads, money with the currency code after the digits; the chart inside takes its own. |
| bleedsides | full | The chart runs to the card's sides, its words on the gutter, or to the floor as well (full, with no footer); for a chart without a value axis. | |
| Look | ||
| sizesm | md= "sm" | "sm" | The gutter, as UiCard's: sm 16, md 24. |
Anything else lands on the root element: native attributes, aria-*, data-testid.
When to use another component
| When you need | Take |
|---|---|
| A chart alone in a page section | The chart itself, Area chart, Bar chart or Donut chart |
| Rows with small lines | List item rows in a List |
| A change against the period before | Delta in #actions |
| A table of the figures | Table |