React chart example
Column chart
Compare category values at a glance using vertical bars that share a common baseline.
What is a column chart?
A column chart uses vertical bars to compare numeric values across categories. Each bar starts from a common baseline, so readers can compare its height directly. It is a useful default when the main question is which category is larger and by how much.
When to use it
Use columns for sales by product, counts by status or totals for a small number of time periods. They work well with short category labels. Use horizontal bars for long names or many categories, and a line chart when the continuity of a time series matters more than individual period totals.
Design tips
Start the value axis at zero. Bar length represents magnitude, so a truncated baseline can make modest differences look much larger.
Choose an intentional category order: rank by value to show leaders, or keep a familiar business order when that helps navigation.
Use direct labels when exact numbers matter, but avoid repeating units on every mark if the axis already explains them. Keep one colour unless colour encodes a useful distinction.
Build this chart in React
Compare with
Use for long category names or a ranked list.
Show category totals and their component contributions.
Graphy Chart SDK
Add Graphy’s column charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.