Home›Bar›Horizontal Bar Chart
POPULARBar

Horizontal Bar Chart

Ranked leaderboard visualization with animated horizontal bars, custom category cells, and right-aligned value labels.

Loading chart…
#bar#horizontal#ranking#comparison#leaderboard#categories
Customization Guides & Code Snippets

◆Configuring layout='vertical' with Swapped Axes

In Recharts, horizontal bar charts require layout='vertical' on BarChart. The XAxis becomes type='number' while the YAxis becomes type='category' dataKey='name'.

<BarChart layout="vertical" data={data}>
  <XAxis type="number" stroke="#5c6370" domain={[0, 100]} />
  <YAxis type="category" dataKey="name" stroke="#5c6370" width={75} />
  <Bar dataKey="score" radius={[0, 6, 6, 0]} />
</BarChart>

◆Dynamic Ranked Color Gradients with Cell

Map through individual data items using <Cell fill={entry.fill} /> to highlight top podium ranks (Emerald #1, Cyan #2, Blue #3) dynamically.

{data.map((entry, index) => (
  <Cell key={`cell-${index}`} fill={entry.fill} />
))}

◆Right-Aligned Value Labels with LabelList

Display numeric point values or percentages directly at the tip of each horizontal bar using position='right'.

<LabelList dataKey="score" position="right" formatter={(val: number) => `${val} pts`} fill="var(--muted)" fontSize={11} fontFamily="DM Mono, monospace" />
When to use a Horizontal Bar Chart

A Horizontal Bar Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Comparing values across multiple categories (e.g. monthly revenue per region)
  • ✓Showing ranked data where order matters (e.g. top 10 products by sales)
  • ✓Displaying survey results or poll responses
  • ✓Visualizing before/after comparisons
Tips for Recharts Horizontal Bar Chart
TIP 1Always start the Y-axis at zero to avoid misleading comparisons
TIP 2Use rounded corners (radius prop) for a modern, polished look
TIP 3Add a Tooltip component so users can see exact values on hover
TIP 4Use Cell components to color individual bars differently
TIP 5For long category names, switch to a horizontal bar chart layout
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

What is a horizontal bar chart called?

In data visualization standards (including Microsoft Excel, Tableau, and Google Sheets), a chart with horizontal rectangular bars is formally called a 'Bar Chart' (or 'Horizontal Bar Chart'), whereas a chart with vertical upright columns is formally termed a 'Column Chart'. In business intelligence tools and D3.js, it is also frequently termed a 'Row Chart'.

How do you make a horizontal bar chart in Recharts (recharts horizontal bar chart)?

To make a horizontal bar chart in React using Recharts, configure <BarChart layout='vertical' data={data}>. Set <XAxis type='number' /> for continuous metrics, <YAxis type='category' dataKey='name' /> for category labels, and render <Bar dataKey='value' radius={[0, 6, 6, 0]} />.

How do you create a horizontal bar chart in Excel (how to make a horizontal bar chart in excel)?

In Excel, select your table of categories and values, navigate to the Insert tab in the top ribbon, click the Bar Chart dropdown icon in the Charts group, and select '2-D Clustered Bar'. In React applications, you can achieve the same visualization dynamically without static spreadsheets by passing JSON data to Recharts.

How does a horizontal bar chart in Recharts compare to Python Matplotlib (matplotlib horizontal bar chart)?

In Python Matplotlib, you render horizontal bars using the plt.barh(categories, values) function, generating static image files (PNG/SVG). In modern web applications, Recharts runs natively inside the React virtual DOM as responsive vector SVGs with dynamic animations, hover tooltips, and real-time state updates.

When should you use a ranked horizontal bar chart?

Use a ranked horizontal bar chart when comparing leaderboard items, top-performing products, or survey results sorted from highest to lowest. The horizontal orientation provides ample room for full descriptive names on the Y-axis without diagonal tilt or truncation.

Related Charts