# Sparkline

A compact trend line for KPI cards, table rows and dashboards. The line and its shaded area rise from the baseline on mount, and the chart fills the width of its container.

<demo-sparkline>



</demo-sparkline>

## Usage

```vue
<script setup lang="ts">
  import Sparkline from '~/components/ui/sparkline/Sparkline.vue';
</script>

<template>
  <Sparkline
    :data="[12, 18, 15, 22, 19, 27, 24, 31]"
    color="var(--chart-2)"
    aria-label="Revenue, last 8 months"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        number[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Series values in order
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'var(--chart-1)'
      </code>
    </td>
    
    <td>
      Any CSS color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        height
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        48
      </code>
    </td>
    
    <td>
      Height in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stroke-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Line width in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fill
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Shades the area under the line
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        aria-label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Trend'
      </code>
    </td>
    
    <td>
      Accessible name of the chart
    </td>
  </tr>
</tbody>
</table>

Motion respects `prefers-reduced-motion`: the chart jumps to its final state instead of animating.

## Use TanStack Charts instead

Every chart imports its engine from one file, `components/ui/chart/chart-backend.ts`. The default engine is a small, dependency-free SVG renderer whose API matches [TanStack Charts](https://tanstack.com/charts) 1.x exactly, so chart definitions are valid TanStack definitions.

To switch, install TanStack Charts and replace the exports in that file:

```bash
pnpm add @tanstack/charts@^1.1.0 @tanstack/vue-charts@^1.1.0
```

```ts
// components/ui/chart/chart-backend.ts
export { Chart } from '@tanstack/vue-charts';
export { areaY, defineChart, lineY } from '@tanstack/charts';
export { pie, polar, radialArc } from '@tanstack/charts/polar';
export { scaleLinear } from '@tanstack/charts/scales/linear';
export { scalePoint } from '@tanstack/charts/scales/point';
```

No component code changes. Verified against TanStack Charts 1.1.0, the first stable line with a compatibility promise for its public API.