# Sparkline

> A small trend line with no axes, to sit beside a number.

Source: https://ngwr.dev/charts/sparkline  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrSparkline } from 'ngwr/charts/sparkline';

@Component({ imports: [WrSparkline] })
export class MyComponent {}
```

```scss
@use 'ngwr/charts/sparkline';
```

## 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)" />
```

## Tooltip

Set `[tooltip]="false"` to turn it off.

```angular-html
<wr-sparkline [data]="data" ariaLabel="Signups" />
<wr-sparkline [data]="data" ariaLabel="Signups" [tooltip]="false" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `data` | The values, left to right. Evenly spaced — a sparkline carries no x axis, so pass an already-ordered series rather than points with their own timestamps. | `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'` |
| `tooltip` | Show a tooltip with the value of the point nearest the pointer, marking that point, and named by `ariaLabel` when one is given. Pointer only. | `boolean` | `true` |
| `valueFormat` | Writes the value in the tooltip. `null` uses `Intl.NumberFormat` in `LOCALE_ID`. | `((value: number) => string) \| null` | `null` |

## Dependencies

| Built on | [Popover](https://ngwr.dev/reference/components/popover) |
| --- | --- |

## See also

- [Statistic](https://ngwr.dev/reference/components/statistic) — A key number with a label and an optional change.
- [Line Chart](https://ngwr.dev/charts/line-chart) — One or more series of values as lines.
- [Bar Chart](https://ngwr.dev/charts/bar-chart) — Vertical bars for one series of values.
- [Popover](https://ngwr.dev/reference/components/popover) — Show a template, or a text tooltip, next to its trigger.