React chart example
Diverging bar chart
Show increases and decreases either side of a shared zero line.
What is a diverging bar chart?
A diverging bar chart anchors every bar to a central zero, so positive values run one way and negative values the other. Length reads as magnitude and side reads as direction.
When to use it
Use it for change, variance against a target, or net sentiment — anywhere the sign matters as much as the size. It is the right chart when roughly half your categories are negative. If everything points the same way, an ordinary bar chart is simpler and just as clear.
Design tips
Sort from most positive to most negative so the zero crossing lands in one place.
Use two colours for direction only — never a third for emphasis as well.
Label the zero line explicitly; it is the only reference the reader has.
Build this chart in React
Compare with
Use when all categories extend in the same direction from zero.
Use when vertical bars suit short labels or discrete periods.
Graphy Chart SDK
Add Graphy’s diverging bar charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.