# Line Chart

Line charts with one or more series. Every example is live.

Group: Charts

## Import

```tsx
import { LineChart } from "@indoku/ui"
```

## Examples

### Basic

Hover a legend item to highlight its series.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

function LineBasic() {
  return <Box maxW="2xl"><LineChart series={series} categories={months} legend /></Box>
}
```

### Dashed

Set `dashed` per series, or on the whole chart.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

function LineDashed() {
  return <Box maxW="2xl"><LineChart series={[{ name: "Revenue", values: revenue }, { name: "Forecast", values: [null, null, null, 240, 260, 320], dashed: true }]} categories={months} legend /></Box>
}
```

### Gradient

`gradient` fades the area under the line.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

function LineGradient() {
  return <Box maxW="2xl"><LineChart series={[{ name: "Revenue", values: revenue }]} categories={months} gradient /></Box>
}
```

### Biaxial

Give a series `axis: right` for a second y axis.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

function LineBiaxial() {
  return <Box maxW="2xl"><LineChart series={[{ name: "Revenue ($k)", values: revenue }, { name: "Users (k)", values: [1.2, 1.8, 1.5, 2.4, 2.1, 3], axis: "right" }]} categories={months} legend /></Box>
}
```

### Connect nulls

`null` leaves a gap unless `connectNulls` is set.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

function LineConnectNulls() {
  const gap = [120, 180, null, null, 210, 300]
  return (
    <Box display="grid" gridTemplateColumns={{ base: "1fr", md: "1fr 1fr" }} gap="4" maxW="3xl">
      <LineChart series={[{ name: "Gap", values: gap }]} categories={months} />
      <LineChart series={[{ name: "Connected", values: gap }]} categories={months} connectNulls />
    </Box>
  )
}
```

### Series labels

`seriesLabels` prints the name at the end of each line.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

function LineSeriesLabels() {
  return <Box maxW="2xl"><LineChart series={series} categories={months} seriesLabels showDots={false} /></Box>
}
```

## Props

### LineChart

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `series` | `ChartSeries[]` |  | Data. Values accept null; axis and dashed are per series. |
| `categories` | `string[]` |  | X labels. |
| `gradient / area` | `boolean` | `false` | Fill under the line. |
| `dashed` | `boolean` | `false` | Dash every line. |
| `connectNulls` | `boolean` | `false` | Join across null values. |
| `seriesLabels` | `boolean` | `false` | Name at the end of each line. |
| `legend` | `boolean` | `false` | Interactive legend. |
| `referenceLines` | `ReferenceLineSpec[]` |  | Horizontal guides. |

`*` = required. Style props and HTML attributes are accepted too.

## See also

- Overview: https://ui.indoku.org/docs/chart
- Area Chart: https://ui.indoku.org/docs/area-chart