# Horizontal Ranking Bar Chart

> Card with a horizontal bar chart ranking five countries by listeners, country names on the axis and values printed at the end of each bar. Client component on recharts 3.8.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/bar-chart-02).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/bar-chart-02
- Screenshot: https://shadcn.exchange/shot/01orbital/bar-chart-02/light.png
- Registry item: https://01orbital.dev/r/bar-chart-02.json
- Categories: charts
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/bar-chart-02.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `recharts`
- Registry items: `card`, `@01orbital/chart`

## Files

### `blocks/charts/bar-chart-02/index.tsx`

```tsx
"use client"

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

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Top countries",
  description: "Listeners by country in October",
} as const

const COUNTRIES = [
  { country: "United States", listeners: 4820 },
  { country: "Germany", listeners: 2940 },
  { country: "Japan", listeners: 2310 },
  { country: "Brazil", listeners: 1870 },
  { country: "India", listeners: 1540 },
]

const CHART_CONFIG = {
  listeners: { label: "Listeners", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function BarChart02() {
  return (
    <Card className="mx-auto w-full max-w-md">
      <CardHeader>
        <CardTitle>
          <h2>{COPY.title}</h2>
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={CHART_CONFIG}>
          <BarChart
            accessibilityLayer
            data={COUNTRIES}
            layout="vertical"
            margin={{ right: 48 }}
          >
            {/* Stock ChartContainer's label color misses recharts 3's label layer. */}
            <YAxis
              tick={{ fill: "var(--muted-foreground)" }}
              dataKey="country"
              type="category"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              width={104}
            />
            <XAxis dataKey="listeners" type="number" hide />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Bar dataKey="listeners" fill="var(--color-listeners)" radius={6}>
              <LabelList
                dataKey="listeners"
                position="right"
                offset={8}
                className="fill-foreground"
                fontSize={12}
                formatter={(value) => Number(value).toLocaleString("en-US")}
              />
            </Bar>
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```