# Sparkline

> Tiny inline trend line — no axes, no labels. Drop it next to a number to give context at a glance.

Source: https://ngwr.dev/reference/components/sparkline  
Kind: Component

## Installation

```angular-ts
import { WrSparkline } from 'ngwr/sparkline';

@Component({ imports: [WrSparkline] })
export class MyComponent {
  protected readonly data = [12, 18, 9, 22, 30, 25, 27, 35, 32, 41, 38, 45];
}
```

## Basic

```angular-html
<wr-sparkline [data]="[12, 14, 9, 17, 21, 18, 23]" />
```

## Filled area

Set `[showArea]` to fill under the line.

```angular-html
<wr-sparkline [data]="data" [showArea]="true" color="var(--wr-color-success)" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `data` | — | `readonly number[]` | `[]` |
| `ariaLabel` | Accessible name. A sparkline usually sits beside the number it summarises, where announcing it again is noise — so it is `aria-hidden` by default and becomes a named `role="img"` only when a consumer says what it shows. | `string \| null` | `null` |
| `color` | Stroke colour. | `string` | ```var(--wr-color-primary)``` |
| `strokeWidth` | Line thickness in CSS pixels — `vector-effect="non-scaling-stroke"` keeps it at that width whatever the box is stretched to, so it is NOT in viewBox units. | `number` | `1.5` |
| `showArea` | Fill the area below the line. | `boolean` | `false` |
| `showTip` | Show a dot at the last data point. | `boolean` | `true` |
| `width` | CSS width. | `string` | `'8rem'` |
| `height` | CSS height. | `string` | `'2rem'` |