import { Component } from '@angular/core';
import { WrSparkline } from 'ngwr/charts/sparkline';
@Component({ imports: [WrSparkline] })
export class MyComponent {}Sparkline
A small trend line with no axes, to sit beside a number.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic
<wr-sparkline [data]="[12, 14, 9, 17, 21, 18, 23]" />Filled area
Set [showArea] to fill under the line.
<wr-sparkline [data]="data" [showArea]="true" color="var(--wr-color-success)" />Tooltip
Set [tooltip]="false" to turn it off.
<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 |
|---|