Sparkline

Charts

A minimal inline chart for KPI cards, tables, and dashboards. Supports line and bar types.

Props

Prop	Type	Default	Description
`data`*	`number[]`	`–`	Array of numeric values.
`type`	`"line" \| "bar"`	`"line"`	Chart type.
`color`	`string`	`"#7f00ff"`	Stroke/fill color.
`showArea`	`boolean`	`true`	Fill area under line.
`width`	`number`	`100`	Width in pixels.
`height`	`number`	`36`	Height in pixels.
`showValue`	`boolean`	`false`	Show last value as text.
`trendColor`	`boolean`	`false`	Auto-color: green if up, red if down.

Examples

In a KPI card

Revenue

+12.4%

$10,200

Users

+8.1%

4,821

Churn

-0.4%

2.3%

vue

<!-- Line sparkline (for KPI cards) -->
<DsSparkline
  :data="[12, 18, 14, 22, 19, 28, 25, 31]"
  type="line"
  color="#7f00ff"
  :show-area="true"
  :width="100"
  :height="36"
/>

<!-- Bar sparkline with trend color -->
<DsSparkline
  :data="[8, 14, 11, 6, 9, 13, 17]"
  type="bar"
  :trend-color="true"
  :width="80"
  :height="32"
  :show-value="true"
/>

Bar sparkline

Weekly

Trend

vue

<!-- Line sparkline (for KPI cards) -->
<DsSparkline
  :data="[12, 18, 14, 22, 19, 28, 25, 31]"
  type="line"
  color="#7f00ff"
  :show-area="true"
  :width="100"
  :height="36"
/>

<!-- Bar sparkline with trend color -->
<DsSparkline
  :data="[8, 14, 11, 6, 9, 13, 17]"
  type="bar"
  :trend-color="true"
  :width="80"
  :height="32"
  :show-value="true"
/>

Skeleton

Use DsSparklineSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsSparklineSkeleton
  :width="100"
  :height="36"
/>

With value

vue

<DsSparklineSkeleton
  :width="100"
  :height="36"
  showValue
/>

Accessibility

Decorative SVG — add aria-hidden="true" when used purely for visual trend.

RadarChart

Calendar