# Chart: Horizontal bars

> Set `layout="vertical"` on the chart and swap the axis types. `<LabelList />` prints each value at the end of its bar.

Example: https://hextaui.com/docs/chart/examples/horizontal
Component docs: https://hextaui.com/docs/chart.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/chart-horizontal.json
```

This adds `components/examples/chart/horizontal.tsx` with the Chart component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/chart/horizontal.tsx"
"use client"

import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"

const chartData = [
  { page: "Pricing", views: 4821 },
  { page: "Docs", views: 3902 },
  { page: "Changelog", views: 2214 },
  { page: "Blog", views: 1736 },
  { page: "Careers", views: 640 },
]

const chartConfig = {
  views: {
    label: "Views",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig

export function ChartHorizontal() {
  return (
    <ChartContainer
      aria-label="Horizontal bar chart of page views"
      config={chartConfig}
      className="h-56 w-full max-w-md"
    >
      <BarChart data={chartData} layout="vertical" margin={{ right: 48 }}>
        <XAxis type="number" dataKey="views" hide />
        <YAxis
          type="category"
          dataKey="page"
          tickLine={false}
          axisLine={false}
          tickMargin={8}
          width={76}
        />
        <ChartTooltip
          cursor={false}
          content={<ChartTooltipContent hideLabel />}
        />
        <Bar dataKey="views" fill="var(--color-views)" radius={4} barSize={20}>
          <LabelList
            dataKey="views"
            position="right"
            offset={8}
            className="fill-foreground"
            formatter={(value) => Number(value).toLocaleString("en-US")}
          />
        </Bar>
      </BarChart>
    </ChartContainer>
  )
}
```

## Props in this example

### ChartContainer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `config` | `ChartConfig` | – | Labels, icons and colors for each data key. |

### ChartTooltip

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | `ReactElement \| (props) => ReactNode` | – | Usually <ChartTooltipContent />. |

## More Chart examples

- [Bar chart](https://hextaui.com/docs/chart/examples/bar.md)
- [Line chart](https://hextaui.com/docs/chart/examples/line.md)
- [Stacked bars](https://hextaui.com/docs/chart/examples/stacked.md)
- [Donut](https://hextaui.com/docs/chart/examples/pie.md)
- [Radar](https://hextaui.com/docs/chart/examples/radar.md)
- [Tooltip](https://hextaui.com/docs/chart/examples/tooltip.md)
- [Formatting values](https://hextaui.com/docs/chart/examples/value-format.md)
- [Icons](https://hextaui.com/docs/chart/examples/icons.md)
- [Light and dark colors](https://hextaui.com/docs/chart/examples/theme.md)
- [Negative values](https://hextaui.com/docs/chart/examples/negative.md)
- [Long labels](https://hextaui.com/docs/chart/examples/long-labels.md)
- [Right to left](https://hextaui.com/docs/chart/examples/rtl.md)