---
title: "BarChart"
description: "Values compared across categories: series side by side, stacked into one bar per category, or as horizontal bars for long names. Give each series the color its legend shows."
---

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

# BarChart

## Stacked by status

```tsx
import { BarChart, ChartLegend, ChartPanel } from '@arbol-ai/ui/charts';
import type { BarSeries } from '@arbol-ai/ui/charts';

const DAYS = ['Nov 2', 'Nov 3', 'Nov 4', 'Nov 5', 'Nov 6', 'Nov 7'];

const BY_STATUS: BarSeries[] = [
  { label: 'Attended', values: [38, 42, 35, 44, 40, 18], color: 'chart-positive' },
  { label: 'Cancelled', values: [4, 6, 3, 5, 7, 2], color: 'chart-caution' },
  { label: 'No-show', values: [3, 2, 5, 1, 4, 1], color: 'chart-negative' },
];

<ChartPanel
  legend={<ChartLegend items={BY_STATUS.map(({ label, color = 'chart-1' }) => ({ label, color }))} />}
  note="Attended, cancelled and no-show appointments per day"
  title="Appointments by status"
>
  <BarChart
    aria-label="Appointments per day by status"
    categories={DAYS}
    isStacked
    series={BY_STATUS}
  />
</ChartPanel>
```

## This period beside the previous one

```tsx
import { BarChart } from '@arbol-ai/ui/charts';

<BarChart
  aria-label="Conversations by channel, this period and the previous one"
  categories={['WhatsApp', 'Phone', 'Web chat']}
  series={[
    { label: 'Previous period', values: [1180, 640, 212], color: 'chart-neutral' },
    { label: 'This period', values: [1342, 598, 287], color: 'chart-1' },
  ]}
/>
```

## Horizontal, with rates

```tsx
import { BarChart } from '@arbol-ai/ui/charts';

const PERCENT: Intl.NumberFormatOptions = { style: 'percent' };

<BarChart
  aria-label="Attendance rate by professional"
  categories={['Dr. Ana Gómez', 'Dr. Luis Pérez', 'Dr. Sara Ruiz', 'Dr. Tomás Vidal']}
  formatOptions={PERCENT}
  height={200}
  orientation="horizontal"
  series={[{ label: 'Attendance', values: [0.94, 0.88, 0.81, 0.76] }]}
/>
```

## Source

The examples above are [`src/charts/bar-chart.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/charts/bar-chart.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/charts/bar-chart/index.mdx