> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Chart.Line />

> A line over a category axis.

```js theme={"system"}
import {Chart} from "attio/client"
```

`Chart` is a namespace, not a renderable component. Use `Chart.Line`.

There is no `mode`, because area charts do not exist. Attio picks the drawing from the data: points
with no `seriesId` draw as one line, and points that carry one draw as a line each, with a legend.
A single-series line chart draws no legend.

`x` is a category, the same as it is on a bar chart. Send ISO date strings rather than timestamps,
and format them with `xAxis.format`.

See [Using charts](../../guides/using-charts) for height tokens, color tokens, `format`, and the
empty and error states.

## Example

```tsx TypeScript theme={"system"}
import {Chart} from "attio/client"

export function MyDialog() {
  return (
    <Chart.Line
      title="Revenue by month"
      data={[
        {x: "2026-01-01", y: 12000},
        {x: "2026-02-01", y: 15000},
        {x: "2026-03-01", y: 21000},
      ]}
      xAxis={{label: "Month", format: "date"}}
      yAxis={{label: "Revenue", format: "currency", currency: "USD"}}
      series={[{id: "revenue", label: "Revenue", color: "green"}]}
    />
  )
}
```

## Props

<ParamField path="data" type="Array<ChartDatum>" required>
  The points to plot. Each point is `{x, y, seriesId?}`. `x` is a category or position: an ISO date
  string or a number, never a `Date`.
</ParamField>

<ParamField path="series" type="Array<ChartSeries>">
  Names, colors, and **orders** the series ids used in `data`. Each entry is
  `{id, label, color?}`.

  Listing a series is optional, and listing an id that no point uses is ignored. The array's order
  is the order of the legend. Ids missing from it follow, in order of first appearance in `data`.

  A single-series chart takes its color and its tooltip label from the first entry, and ignores
  that entry's `id`.
</ParamField>

<ParamField path="xAxis" type="ChartAxis">
  The category axis. `{label?, format?, currency?}`. `format` and `currency` follow the
  [shared format rules](../../guides/using-charts#format).
</ParamField>

<ParamField path="yAxis" type="ChartAxis">
  The value axis. `{label?, format?, currency?}`. `format="currency"` needs a sibling `currency`
  code.
</ParamField>

<ParamField path="title" type="string">
  A caption above the chart.
</ParamField>

<ParamField path="height" type="'small' | 'medium' | 'large' | 'extraLarge'">
  The height of the whole chart, including title and legend.

  Defaults to `"medium"` (240px). See [Using charts](../../guides/using-charts#height).
</ParamField>