Sparkline

NbSparkline is a tiny inline chart for embedding in dashboard tiles, table cells, and KPI widgets. It renders a single line with an optional gradient fill underneath, with no axes, labels, legend, or tooltip. The SVG uses viewBox with preserveAspectRatio="none" so it stretches to fill its container while the stroke stays visually consistent thanks to vector-effect="non-scaling-stroke".

<template>
  <NbSparkline :data="series" />
</template>

<script setup lang="ts">
const series = [3, 5, 4, 7, 6, 9, 8, 10, 12, 11, 14, 13]
</script>

Inline in a KPI tile ​

Sparklines are designed to live inside other UI. They take 100 % of their parent width by default and the height you give them.

Color ​

Pass any valid CSS color, including design-system tokens.

<template>
  <NbSparkline :data="series" color="var(--nb-c-success)" />
</template>

Without fill ​

Set fill to false for a clean line-only sparkline.

Straight segments ​

Set smooth to false to draw straight segments between points instead of smoothed cubic curves.

Stroke width ​

Props ​

Notes ​

• The component renders a fixed internal viewBox of 0 0 100 30 and stretches it via preserveAspectRatio="none" to match the requested width and height. Stroke width stays visually constant because the line uses vector-effect="non-scaling-stroke".
• The gradient fades from color at 30 % opacity at the top to fully transparent at the bottom.
• Each instance generates a unique gradient id via Vue's useId(), so multiple sparklines on the same page do not collide.
• A small vertical padding (~8 % of height) is reserved so the line never touches the top or bottom edge.