> ## 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.Bar />

> Bars over a category axis, grouped side by side or stacked.

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

`<Chart.Bar />` renders a classic bar chart. Data with no `seriesId` is rendered as a single series.
Give points a `seriesId` to render several series, side by side by default or stacked with
`mode="stacked"`.

A multi-series chart draws a legend, since its colors are the only thing naming the series. A
single-series chart draws none.

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

## Example: Grouped

`mode` defaults to `"grouped"`. Series sit side by side, in the order of the `series` array.

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

export function MyDialog() {
  return (
    <Chart.Bar
      title="Revenue by month"
      data={[
        {x: "Jan", y: 12000, seriesId: "us"},
        {x: "Jan", y: 8000, seriesId: "eu"},
        {x: "Feb", y: 15000, seriesId: "us"},
        {x: "Feb", y: 9000, seriesId: "eu"},
      ]}
      series={[
        {id: "us", label: "United States", color: "blue"},
        {id: "eu", label: "Europe", color: "green"},
      ]}
      yAxis={{label: "Revenue", format: "currency", currency: "USD"}}
    />
  )
}
```

## Example: Stacked

`mode="stacked"` stacks one segment per series. `seriesId` is required in `data` when using
`"stacked"` mode. The `series` array's order is the bottom-to-top order of the stack.

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

export function MyDialog() {
  return (
    <Chart.Bar
      title="Revenue by month"
      mode="stacked"
      data={[
        {x: "Jan", y: 12000, seriesId: "us"},
        {x: "Jan", y: 8000, seriesId: "eu"},
        {x: "Feb", y: 15000, seriesId: "us"},
        {x: "Feb", y: 9000, seriesId: "eu"},
      ]}
      series={[
        {id: "us", label: "United States", color: "blue"},
        {id: "eu", label: "Europe", color: "green"},
      ]}
      yAxis={{label: "Revenue", format: "currency", currency: "USD"}}
    />
  )
}
```

## Props

<ParamField path="data" type="Array<ChartDatum> | Array<ChartSeriesDatum>" required>
  The data set to be plotted. Each point is `{x, y, seriesId?}`. `x` is a category or position: an
  ISO date string or a number, never a `Date`. `y` is the value.

  In `"stacked"` mode, `seriesId` is required on every point.
</ParamField>

<ParamField path="mode" type="'grouped' | 'stacked'">
  Bars side by side, or stacked on each other.

  Defaults to `"grouped"`.
</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, the grouping, and the stacking. Ids missing from it follow, in order
  of first appearance in `data`.

  A single-series chart (points with no `seriesId`) 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>