React chart example
Dual-axis combo
Compare measures with different units using bars and a line, aligned on a shared axis with separate value scales.
Options apply to compatible charts.
Synthetic sample data · Revenue and growth across 6 quarters, with two value scales.
What is a dual-axis combo chart?
A dual-axis combo chart combines two mark types and two value scales over a shared horizontal axis. It is often used to show an absolute measure alongside a rate. The shared timeline aligns the observations, but the two vertical axes still represent different units.
When to use it
Use it when two measures with different units or very different ranges need to be read across the same ordered periods, such as revenue and growth rate. If the units and ranges are comparable, a shared-scale line or grouped column chart is usually simpler. Choose separate aligned charts when readers may confuse the two axes.
Design tips
Label both value axes with their measures and units. Use a clear legend and distinct mark types to help readers assign each series correctly.
Choose scale ranges for legibility and consistency, not to make the lines or columns appear more closely related. Visual alignment does not demonstrate correlation.
Use one shared scale when the measures have compatible units and a direct comparison is intended. Use separate panels if the second axis adds more confusion than context.
Graphy Chart SDK
Add Graphy’s dual-axis combo charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.