vue-charts Sparkline
A sparkline shows the shape of a trend without axes, next to the number it explains. It fills the width of its container and is 32 px tall unless you set a height.
The hovered point is a model
v-model:active-index holds the index of the hovered or focused point, or null. Bind it to show the value in your own markup, as the visitors card above does. Arrow keys request a change when the sparkline has focus. A supplied value, including null, controls the display; rejected requests leave it unchanged. Without a model, selection follows item identity through data changes.
Compare several sparklines
Each sparkline scales to its own data by default, so two cards with different numbers can look alike. To compare them, give them the same min and max.
Moving windows
With name-key (for example a date field), points keep their identity: when a new day is appended and the oldest dropped, the line slides instead of reshaping. Without it, points match by position.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | Row[] | required | Values, or rows with data-key. null leaves a gap |
data-key | row path or accessor | 'value' | Field with the value for rows |
name-key | row path or accessor | — | Field that identifies a point across updates |
type | 'line' | 'area' | 'bar' | 'line' | Shape |
color | string | var(--v-charts-series-1, var(--v-charts-series, #2563eb)) | Line, fill and dot color |
curve | 'monotone' | 'linear' | 'monotone' | Line interpolation |
stroke-width | number | 1.5 | Line width |
min / max | number | data range (bars include 0) | Scale bounds |
end-dot | boolean | true | Dot on the latest value |
value-formatter | (value, row) => string | locale number format (1,234) | Value text in the tooltip, point names and the summary |
locale | string | 'en-US' | Number format of the default value text |
active-index | number | null | — | Hovered point, for v-model |
gap / radius | number | 1 / 1 | Bars only |
width / height / aspect | number | full width, 32 px | Size |
title | string | 'Trend: N values from first to last' | Accessible name. A title replaces the whole name, values included |
Place <Tooltip> in the default slot for a tooltip on hover.
For row data, Row is inferred from data; data-key accepts a typed row path or accessor.