Horizontal Chart
Interactive horizontal bar chart with ranked categories, percentage labels, and clean responsive layout. Perfect for rankings and long label datasets.
◆Configuring layout='vertical' with Swapped Axes
To create a horizontal bar chart in Recharts, set layout='vertical' on <BarChart>. In this orientation, <XAxis type='number' /> handles quantitative values while <YAxis type='category' dataKey='channel' /> renders category labels.
<BarChart layout="vertical" data={data}>
<XAxis type="number" stroke="#5c6370" />
<YAxis type="category" dataKey="channel" stroke="#5c6370" width={110} />
<Bar dataKey="conversions" radius={[0, 6, 6, 0]} />
</BarChart>◆Right-Aligned Value Labels with LabelList
Add percentage or count labels directly beside each bar using <LabelList dataKey='share' position='right' /> to improve immediate scannability without requiring mouse hover.
<LabelList dataKey="share" position="right" fill="var(--muted)" fontSize={11} fontFamily="DM Mono, monospace" />◆Rounded Right Edges for Horizontal Bars
Use radius={[0, 6, 6, 0]} on the <Bar> component to round only the right cap of each horizontal bar while keeping the baseline flush against the Y-axis.
<Bar dataKey="conversions" radius={[0, 6, 6, 0]} barSize={24} />A Horizontal 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
What is a horizontal chart and when should you use it?
A horizontal chart (specifically a horizontal bar chart) flips coordinate axes so that bars extend left-to-right along the horizontal X-axis while categories are listed vertically along the Y-axis. It is the gold standard for ranked leaderboards, customer acquisition channels, and datasets with long category labels (>10 characters) that would otherwise collide on vertical axes.
Vertical vs horizontal chart: which is better?
Use a horizontal chart when category labels are lengthy, when ranking items in descending order (e.g. top sales reps or traffic sources), or when designing for mobile portrait viewports where vertical scrolling is natural. Use a vertical chart (column chart) when displaying time-series data (months, quarters, years) where readers expect chronological progression moving from left to right.
How do you make a horizontal chart in React with Recharts?
Set layout='vertical' on <BarChart>, set type='number' on <XAxis>, and assign type='category' with dataKey='channel' on <YAxis>. Add radius={[0, 6, 6, 0]} to <Bar> so only the right outer edges of each horizontal bar are curved.
How do you build a horizontal chart in Chart.js (horizontal chart js)?
In Chart.js v3 and v4, horizontal bar charts are created by setting indexAxis: 'y' in the options object: options: { indexAxis: 'y', responsive: true }. In React Recharts, you pass layout='vertical' directly to <BarChart>.
How does a horizontal bar chart in Recharts compare to Microsoft Excel?
In Microsoft Excel, creating a horizontal bar chart requires selecting 'Clustered Bar' from the Insert Chart menu. In React with Recharts, layout='vertical' enables dynamic live JSON data binding, fluid SVG animations, interactive tooltips, and seamless automatic dark/light theme switching without static workbook dependencies.
What is a horizontal chart pattern in financial trading?
In technical analysis, a 'horizontal chart pattern' refers to sideways consolidation ranges where asset prices oscillate between parallel horizontal support and resistance lines (a trading channel or rectangle pattern). In UI data visualization, 'horizontal chart' specifically refers to horizontally oriented bar and ranking charts.