Installation
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
<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)" />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' |