# LineChart

A line or area chart for comparing trends on a shared scale.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, LineChart } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <LineChart label="Daily visits" categories={["Mon", "Tue", "Wed"]}
        series={[{id:"this-week", label:"This week", values:[38, 55, 48]}]}
        domain={[0, 60]} variant="area" />
    </FloodRoot>
  );
}
```

## Design notes

- The chart shows dates and a quiet dot grid by default. Enable showYAxis when numeric levels need to be visible at a glance.
- Series names appear in the inspection readout. Set showLegend when the key needs to be visible before interaction.
- Supply equally spaced categories in reading order and up to four named series with the same number of values. Null and nonfinite values leave gaps. Zero is an observation.
- Use a shared domain containing all observations when comparing separate charts. Area shading belongs to the first series. Line styles distinguish the series independently of color. Set curve to linear for straight segments.
- Explore values by hovering, tapping, or using arrow keys, Home and End. The default number format is English; supply formatValue and translated empty, missing and navigation labels for other locales.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `categories` | `readonly string[]` | `Required` |
| `series` | `readonly LineChartSeries[]` | `Required` |
| `domain` | `readonly [number, number]` | `—` |
| `variant` | `"line" \| "area"` | `"area"` |
| `curve` | `"linear" \| "smooth"` | `"smooth"` |
| `showYAxis` | `boolean` | `false` |
| `showLegend` | `boolean` | `—` |
| `formatValue` | `(value: number) => string` | `—` |
| `emptyLabel` | `string` | `"No data"` |
| `missingLabel` | `string` | `"No value"` |
| `navigationLabel` | `string` | `"Use the arrow keys to explore values, or Home and End to jump."` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "role" \| "aria-label">` | `Forwarded` |