React chart example
Horizontal bar
Rank and compare categories using bar lengths, with extra room for longer labels.
Options apply to compatible charts.
Synthetic sample data · Revenue across 6 product categories.
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.
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.