Line Chart

import { WrLineChart } from 'ngwr/line-chart';

@Component({ imports: [WrLineChart] })
export class MyComponent {
  protected readonly series = [
    { label: 'Visits', data: [12, 18, 9, 22, 30, 27, 35] },
    { label: 'Signups', data: [3, 5, 4, 8, 11, 9, 14], color: 'var(--wr-color-success)' },
  ];
  protected readonly labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
}

<wr-line-chart [series]="series" [xLabels]="labels" />

Visits
Signups

MonTueWedThuFriSatSun

Name	Description	Type	Default
`series`	—	`readonly WrLineSeries[]`	`[]`
`ariaLabel`	Accessible name of the chart. The legend carries the series NAMES only — the numbers are nowhere in text — so without this the plot is nothing at all to a screen reader. Falls back to `lineChart.label`.	`string \| null`	`null`
`xLabels`	Labels for the X axis (one per data point).	`readonly string[]`	`[]`
`height`	Chart pixel height.	`number`	`240`
`showGrid`	Show gridlines + axis ticks.	`boolean`	`true`
`showLegend`	Show the legend above the chart.	`boolean`	`true`
`showDots`	Show dots at each data point.	`boolean`	`true`

interface WrLineSeries {
  label: string;
  data: readonly number[];
  color?: string;
}

Name	Description	Type	Default
`WrLineSeries`	One plotted line.	`interface`	—
`label`required	Legend label.	`string`	—
`data`required	Y values, evenly spaced along the x axis.	`readonly number[]`	—
`color`	CSS color for the stroke.	`string`	`palette`

Installation

Multi-series

API

Types