# Line Chart

> Multi-series line chart with a hover tooltip that snaps to the nearest x-axis tick.

Source: https://ngwr.dev/reference/components/line-chart  
Kind: Component

## Installation

```angular-ts
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'];
}
```

## Multi-series

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

## API

Inputs of \<wr-line-chart>.

| 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` |

## Types

Data shapes used by the inputs and outputs above.

```angular-ts
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` |