Chartcn

Shadcn Horizontal Bar Chart

Rank categories with a horizontal bar chart: long labels stay readable, bars can be sorted high to low, and each bar carries its value at the end.

CSV, TSV from Excel/Sheets, a Markdown table, or JSON.

CSV
Sort
Labels
Code
Stars670K
Image
chart.tsx
"use client"

import { useId } from "react"
import { Bar, BarChart, CartesianGrid, LabelList, Rectangle, XAxis, YAxis } from "recharts"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const data = [
  { Framework: "React", Stars: 232000 },
  { Framework: "Vue", Stars: 208000 },
  { Framework: "Angular", Stars: 96000 },
  { Framework: "Svelte", Stars: 80000 },
  { Framework: "Solid", Stars: 33000 },
  { Framework: "Qwik", Stars: 21000 },
]

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

export function Chart() {
  const uid = useId().replace(/[^\w-]/g, "")

  return (
    <ChartContainer config={chartConfig} className="aspect-auto h-[350px] w-full">
      <BarChart accessibilityLayer data={data} layout="vertical" barCategoryGap="24%" barGap={4} margin={{ right: 40 }}>
        <defs>
          <linearGradient id={`${uid}-fill-0`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="var(--color-Stars)" stopOpacity={0.55} />
            <stop offset="100%" stopColor="var(--color-Stars)" stopOpacity={1} />
          </linearGradient>
        </defs>
        <CartesianGrid horizontal={false} strokeDasharray="3 5" />
        <YAxis dataKey="Framework" type="category" tickLine={false} axisLine={false} tickMargin={8} width={61} />
        <XAxis type="number" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={(value) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(value)} />
        <ChartTooltip cursor={{ fill: "var(--muted)", opacity: 0.6 }} content={<ChartTooltipContent />} />
        <Bar dataKey="Stars" fill="var(--color-Stars)" shape={(props) => <Rectangle {...props} fill={`url(#${uid}-fill-0)`} />} radius={[0, 6, 6, 0]} maxBarSize={28}>
          <LabelList dataKey="Stars" position="right" offset={8} className="fill-foreground" fontSize={12} formatter={(value) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(Number(value))} />
        </Bar>
      </BarChart>
    </ChartContainer>
  )
}

When to use a horizontal bar chart

Horizontal bars beat vertical ones when labels are long or when the point of the chart is the ranking.

  • Top pages, products, or customers
  • GitHub stars or downloads by library
  • Survey answers with long option text
  • Leaderboards that should read top to bottom

Data format

  • Column 1 holds the labels shown down the left side; the label width adapts to your longest label.
  • Add more columns for grouped or stacked horizontal bars.
  • Paste CSV, JSON from your API, TSV copied from Excel or Google Sheets, or a Markdown table. The generated component keeps your column names as its data keys.
CSV
Framework,Stars
React,232000
Vue,208000
Angular,96000
Svelte,80000
Solid,33000
Qwik,21000
Same data as JSON
[
  {"framework": "React", "stars": 232000},
  {"framework": "Vue", "stars": 208000},
  {"framework": "Angular", "stars": 96000},
  …
]

Options

Sort
Keep your order, or sort high → low or low → high. Props-mode code sorts at render time.
Values
Show each bar's value at its end.
Grouped / Stacked / 100%
Available when you have more than one series.

How to add it to your project

  1. 1. Add the shadcn/ui chart component (it installs Recharts):
    npx shadcn@latest add chart
  2. 2. Paste your data above, pick the options, and copy the generated chart.tsx.
  3. 3. Save it in your project (e.g. components/horizontal-bar-chart.tsx) and render <Chart />, or <Chart data={rows} /> in Data as prop mode.

Horizontal Bar Chart FAQ