# Line Chart

> One or more series of values as lines.

Source: https://ngwr.dev/charts/line-chart  
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 { WrLineChart } from 'ngwr/charts/line-chart';

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

```scss
@use 'ngwr/charts/line-chart';
```

## Multi-series

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

## Tooltip

`[tooltip]="false"` also hides the crosshair and markers.

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

## Number format

Numbers follow `LOCALE_ID`, with compact ticks. `valueFormat` replaces it on the axis and in the tooltip.

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

```angular-ts
const usdFormat = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

usd = (value: number): string => usdFormat.format(value);
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `series` | One entry per line. A series with no `color` takes the next entry from the chart's fallback palette, so several lines are distinguishable unconfigured. | `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` |
| `valueFormat` | Writes every number the chart shows: the y-axis ticks and the tooltip values. `null` uses `Intl.NumberFormat` in `LOCALE_ID`, with compact ticks (`1.2K`, `3.4M`) unless the full numbers are shorter. | `((value: number) => 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` |
| `tooltip` | Show the hover readout: the crosshair, the point markers and the tooltip. Off drops all three, since a crosshair with no values beside it points at nothing. | `boolean` | `true` |

## Types

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

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/charts/line-chart`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-line-chart-font-family` | `var(--wr-font-family-base)` | `.wr-line-chart` |
| `--wr-line-chart-legend-column-gap` | `var(--wr-space-lg)` | `.wr-line-chart__legend` |
| `--wr-line-chart-legend-item-font-size` | `var(--wr-text-xs)` | `.wr-line-chart__legend-item` |
| `--wr-line-chart-legend-item-gap` | `var(--wr-space-sm)` | `.wr-line-chart__legend-item` |
| `--wr-line-chart-legend-margin-bottom` | `var(--wr-space-md)` | `.wr-line-chart__legend` |
| `--wr-line-chart-legend-row-gap` | `var(--wr-space-sm)` | `.wr-line-chart__legend` |
| `--wr-line-chart-plot-inset-x` | `var(--wr-space-md)` | `.wr-line-chart` |
| `--wr-line-chart-plot-inset-y` | `var(--wr-space-sm)` | `.wr-line-chart` |
| `--wr-line-chart-tick-color` | `var(--wr-color-on-surface-muted)` | `.wr-line-chart__y-axis` |
| `--wr-line-chart-tick-font-size` | `var(--wr-text-xs)` | `.wr-line-chart__y-axis` |
| `--wr-line-chart-tick-gap` | `var(--wr-space-xs)` | `.wr-line-chart__y-axis` |
| `--wr-line-chart-tick-line-height` | `var(--wr-text-xs-leading)` | `.wr-line-chart__y-axis` |
| `--wr-line-chart-tooltip-border` | `var(--wr-border-base)` | `.wr-line-chart__tooltip` |
| `--wr-line-chart-tooltip-font-size` | `var(--wr-text-xs)` | `.wr-line-chart__tooltip` |
| `--wr-line-chart-tooltip-label-font-weight` | `var(--wr-font-weight-semibold)` | `.wr-line-chart__tooltip-label` |
| `--wr-line-chart-tooltip-label-margin-bottom` | `var(--wr-space-xs)` | `.wr-line-chart__tooltip-label` |
| `--wr-line-chart-tooltip-padding-x` | `var(--wr-space-md)` | `.wr-line-chart__tooltip` |
| `--wr-line-chart-tooltip-padding-y` | `var(--wr-space-sm)` | `.wr-line-chart__tooltip` |
| `--wr-line-chart-tooltip-radius` | `var(--wr-border-radius-base)` | `.wr-line-chart__tooltip` |
| `--wr-line-chart-tooltip-row-gap` | `var(--wr-space-sm)` | `.wr-line-chart__tooltip-row` |
| `--wr-line-chart-tooltip-value-font-weight` | `var(--wr-font-weight-semibold)` | `.wr-line-chart__tooltip-value` |
| `--wr-line-chart-x-labels-font-size` | `var(--wr-text-xs)` | `.wr-line-chart__x-labels` |
| `--wr-line-chart-x-labels-margin-top` | `var(--wr-space-xs)` | `.wr-line-chart__x-labels` |

## See also

- [Sparkline](https://ngwr.dev/charts/sparkline) — A small trend line with no axes, to sit beside a number.
- [Bar Chart](https://ngwr.dev/charts/bar-chart) — Vertical bars for one series of values.
- [Calendar Heatmap](https://ngwr.dev/charts/calendar-heatmap) — A year of daily values as a grid of days.
- [Colors](https://ngwr.dev/guides/tokens/colors) — The --wr-color-* tokens, and which one to use for fills, text and borders.