Area chart
Follow values over time as lines and filled areas. Explore each point from the keyboard, with gaps shown as missing data rather than zero.
| When | Spending | Income |
|---|---|---|
| October 2025 | €3,420 | €4,100 |
| November 2025 | €3,610 | €4,150 |
| December 2025 | €4,280 | €4,300 |
| January 2026 | €3,180 | €4,380 |
| February 2026 | €3,050 | €4,220 |
| March 2026 | €3,390 | €4,400 |
| April 2026 | €3,520 | €4,460 |
| May 2026 | €3,710 | €4,390 |
| June 2026 | €3,460 | €4,520 |
| July 2026 | €3,890 | €4,610 |
| August 2026 | €4,020 | €4,580 |
| September 2026 | €2,310 | €2,790 |
<script setup lang="ts">import { UiAreaChart, useUiT } from 'grani' const { n } = useUiT() const eur = (v: number) => n(v, { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }) const MONTHS = [ '2025-10', '2025-11', '2025-12', '2026-01', '2026-02', '2026-03', '2026-04', '2026-05', '2026-06', '2026-07', '2026-08', '2026-09',] const SPENDING = [3420, 3610, 4280, 3180, 3050, 3390, 3520, 3710, 3460, 3890, 4020, 2310] const INCOME = [4100, 4150, 4300, 4380, 4220, 4400, 4460, 4390, 4520, 4610, 4580, 2790]</script> <template> <UiAreaChart :x="MONTHS" :series="[ { key: 'spending', label: 'Spending', values: SPENDING }, { key: 'income', label: 'Income', values: INCOME, variant: 'line' }, ]" :format="eur" ariaLabel="Spending and income by month" /></template>
Also called line chart, time series chart, trend chart.
Usage
<UiAreaChart :x="x" :series="series" :aria-label="ariaLabel"/>
With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Data | ||
| x*DateValue[] | The time axis: one date per point, 2026-09 a month, 2026-09-24 a day; text that is not a date stays as it is. | |
| series*AreaSeries[] | The series, in the order they take the chart colors, five at most. Each is key, label and values; variant: 'line' draws it unfilled, dashed for a figure of another kind, total: false keeps its sum out of the legend. | |
| Behavior | ||
| grainmonth | day | weekday | week= "month" | "month" | What one point stands for: the labels and the tooltip read the dates by it; weekday names a day of one week, "Tue". |
| formatChartFormat= "number" | "number" | How values read in the legend, the tooltip and the table; money writes the currency code after the digits, 1,234.00 USD. The axis prints compact figures (or percents) without the unit. |
| curvesmooth | linear | step= "smooth" | "smooth" | smooth bends through the points without passing them, linear joins them, step holds each value. |
| yAxisboolean= true | true | The value axis with its grid; off for a chart that only shows a shape. |
| legendboolean= true | true | The legend with each series' total, a press shows one series alone. |
| tooltipTotal{ label: string; of: string[]; } | A sum of some series under them in the tooltip and the table: { label: 'Revenue', of: ['orders', 'events'] }. | |
| partialboolean= false | false | The last point is a period still going: its segment is dashed, its label and tooltip say so. |
| highlightnumber | The index of the point in light, the one the card's headline speaks of: a dot on each series there. | |
| Look | ||
| heightnumber= 240 | 240 | The height in pixels, the time axis included; the legend is below it. |
| Form and access | ||
| ariaLabel*string | What the chart shows, for a screen reader: "Spending and income by month". | |
Anything else lands on the root element: native attributes, aria-*, data-testid.
When to use another component
| When you need | Take |
|---|---|
| Amounts per period | Bar chart |
| The parts of a whole | Donut chart |
| A trend with no axes beside a number | Sparkline |
| The card with its title, headline and data states | Chart card around it |