React chart example
Horizontal bar
Rank and compare categories using bar lengths, with extra room for longer labels.
What is a horizontal bar chart?
A horizontal bar chart compares categories using bar length. Category names run down the page and values extend horizontally from a shared baseline. This orientation gives labels more space, making it particularly useful for rankings and longer names.
When to use it
Use horizontal bars for survey responses, feature requests, regional totals or ranked product performance. They are a strong choice when readers need to scan names before comparing values. For a small set of short labels, columns work equally well; for a continuous timeline, a line usually communicates the sequence more naturally.
Design tips
Start the value axis at zero and keep bar thickness consistent. Readers judge bar length as an amount.
Sort by value for a ranking, with the largest at the top, unless the categories have a meaningful order. This documentation example keeps product order.
Leave enough room for complete labels. For many categories, use a taller chart or show a clearly labelled top group, such as the ten largest products. State what was left out; a filtered ranking should not look like the complete dataset.
Build this chart in React
Compare with
Use for a few short labels or discrete time periods.
Use when each total must also show its component breakdown.
Graphy Chart SDK
Add Graphy’s horizontal bar charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.