# XWUISparkline

A tiny inline SVG line chart for showing a trend at a glance - ideal inside table cells, list rows, or KPI tiles. Pass a numeric `values` array (a filled area plus polyline render once there are at least two points). Size it with `width` / `height`, and override `strokeColor`, `fillColor`, and the accessible `ariaLabel`. Call `setValues()` to redraw with new data.

## Usage

```ts
import { XWUISparkline } from './XWUISparkline';

const spark = new XWUISparkline(
  container,
  { values: [3, 5, 4, 8, 6, 9, 7] },
  { width: 100, height: 28, strokeColor: 'var(--accent-primary)' }
);

spark.setValues([1, 2, 3, 2, 4, 5]);
```

## Basic Usage

A single inline sparkline drawing a seven-point trend line at a fixed width and height.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A single inline sparkline drawing a seven-point trend line at a fixed width and height.
```

## KPI Rows

Stacks several labelled sparklines as compact KPI rows, each with its own values and stroke color.

```example
file: examples/KPIRows.ts
html: examples/KPIRows.html
title: KPI Rows
description: Stacks several labelled sparklines as compact KPI rows, each with its own values and stroke color.
```

## Up vs Down Trend

Places two filled sparklines side by side - a rising green trend and a falling red one - each with an accessible label.

```example
file: examples/UpVsDownTrend.ts
html: examples/UpVsDownTrend.html
title: Up vs Down Trend
description: Places two filled sparklines side by side - a rising green trend and a falling red one - each with an accessible label.
```

```api
```