https://www.edocr.com/v/rywekkwg/jgzheng/chart-design-dual-axis-combo-chart

Charting Special Topic:
Dual Axis Combo Chart
J.G. Zheng
August 2024
https://www.edocr.com/v/rywekkwg/jgzheng/chart-design-
dual-axis-combo-chart
Introduction
• This lecture gives an in-depth examination of
1. combo chart
2. dual-axis chart
3. dual-axis combo chart
• Conceptual elements of these charts
• Usages
• Setting and configuration of two Y axes and
chart type choices
• Create it in Tableau; understand tool features
and limitations
2
Context
• When users need to see and compare multiple data
serials with multiple attributes
• Chart type considerations
– When attributes are similar in type, units, or ranges
• Clustered column chart
• Line chart (multiple lines) – mostly for time serials
• Combo chart – need to distinguish between serials
– When attributes are different in type, units, or ranges
• Dual-axis chart
• Dual-axis combo chart
3
a
b
c
d
…
R1
R2
R3
…
Data records
or serials
Data attributes or
variables/metrics

https://developers.google.com/chart/interactive/docs/gallery/combochart

1. Combo Chart
• Combo (combination) chart is chart that lets you render each data series as a different marker type
– Two (or more than two) data serials are visualized using different form of charts or visual attributes like
color or shape: column + line is the most often
• Often used when some data serials or variables are treated as different groups and we want to
show them differently.
– Combo charts can have one Y axis or two of them (see dual axis chart)
• Use cases
– Show trending line or a statistic (such average) line.
4
https://developers.google.com/chart/interactive/docs/gallery/combochart
The average is different
from individual countries,
so it is shown as a line to
distinguish – applying
Gestalt’s principle.

https://commons.wikimedia.org/wiki/File:Chart_Showing_at_One_View_the_Price_of_the_Quarter_of_Wheat,_and_Wages_of_Labour_by_the_Week,_from_1565_to_1821.png


https://www.wisevis.com/william-playfair-excel-redesign/

A Classic Combo Chart
5
https://commons.wikimedia.org/wiki/File:Chart_Showing_at_
One_View_the_Price_of_the_Quarter_of_Wheat,_and_Wag
es_of_Labour_by_the_Week,_from_1565_to_1821.png
https://www.wisevis.com/
william-playfair-excel-
redesign/
Two data serials:
1. price of the quarter of wheat
(bar)
2. Weekly wages of a good
mechanic (line)
X axis represents year
(time); y axis represents
money amount (Schilling)

https://community.tableau.com/s/question/0D54T00000C6d5gSAB/3-different-types-of-chart-in-a-single-axis

Three Marker Types in One Combo Chart
• It possible to have three data serials (three
chart types) in one chart
– Line + area + column
6
https://community.tableau.com/s/question/0D54T00000C6d5gSAB/
3-different-types-of-chart-in-a-single-axis

https://inforiver.com/insights/dual-axis-charts-101-introduction-best-practices/


https://layoffstracker.com/

2. Dual Axis Chart
• Dual axis chart is a chart with two vertical axes.
– There are two vertical axes (left and right) representing two (or more) variables/measures
– Two axes represent measures that have significantly difference in
• value ranges (scales)
• different measuring units
• different data types
• Key reading:
– https://inforiver.com/insights/dual-axis-charts-101-introduction-best-practices/
7
https://layoffstracker.com
The left Y axis (black
columns, representing # laid
off) is very different from the
right Y axis (blue columns,
representing # of companies)
in scale and range.

https://layoffstracker.com/


https://public.tableau.com/profile/dash7070#!/vizhome/OlympicCostOverruns/WEBDash

Dual Axis Chart Usage
• Why use a second axis?
– We want to put the two (or more) variables together
to show some kind of relationship (correlation).
– To save screen space (one chart instead of two)
8
https://layoffstracker.com
https://public.tableau.com/profile/
dash7070#!/vizhome/OlympicCo
stOverruns/WEBDash
Column + (narrower) column
dual axis chart: two columns
use different styles.
Left axis is for budget,
money data type,
absolute dollar value.
Right axis is for
overrun
percentage in %

https://layoffs.fyi/

Which Y axis does the data refer to?
• Design conventions (it is a good practice to
follow conventions)
– Put the variable with larger value ranges to the left,
and the one with smaller ranges on the right.
– Use color help to associate with an axis
9
https://layoffs.fyi
Smaller values
on the right
Bleu color
consistent with the
right axis

https://finance.yahoo.com/news/corporate-america-goes-debt-diet-110001131.html


https://www.the-numbers.com/market/

Dual Axis Chart with Two Lines
10
https://finance.yahoo.com/news/
corporate-america-goes-debt-
diet-110001131.html
https://www.the-numbers.com/market/

https://marketrealist.com/2019/02/analyzing-the-trends-in-teslas-valuation-multiples-in-q1


https://cathiesark.com/arkk-holdings-of-tsla

Dual Axis Chart with Three Lines
11
Three lines in one dual axis chart:
two of them (yellow and green
lines) are grouped to use the same
right axis. However, the design is
questionable as the two ratios are
still of very different range.
Three lines in one dual axis chart:
two of them (purple and yellow)
are grouped to use the same right
axis, as they are of same units
and data type, and with similar
ranges.
https://marketrealist.com/2019/02/analyzing-the-trends-in-teslas-valuation-multiples-in-q1
https://cathiesark.com/arkk-holdings-of-tsla

https://cdn-get.whotrades.com/u8/photoDFC5/20727087415-0/original.jpeg


https://fool.whotrades.com/blog/43151739255

3. Dual Axis Combo Chart
• Dual axis combo chart = dual axis chart + combo chart.
– Two (or more than two) data serials are visualized using different form of charts or visual attributes like
color or shape
– A combo chart may not need two axes; a dual axis chart may not need two chart types. But a dual axis
combo chart has two different exes and two different chart types.
•
Typical example: column + line is the most often used type
• Column + Line design conventions (it is a good practice to follow conventions)
– Columns refer to the left axis, lines (or other marker types) refers to the right axis
– Put the variable with larger value ranges to the left, and the one with smaller ranges on the right.
12
https://fool.whotrades.com/blog/43151739255
The red line refers
to the right axis
(EPS).
Blue columns refer to
the left axis (revenue).
Revenue has larger
value range.
The second measure (EPS) is
significantly different (much
smaller in scale and value
range) from the first measure
(revenue).

https://www.fool.com/investing/2021/01/29/ibm-stock-had-terrible-q4-heres-why-still-a-buy/

Variation – more variables
• We can have two or more data serials on each axis
– Note: the current version of Tableau has a limitation on dual
axis combo chart: it can only have one axis (either left or
right), not both axes, with two or more variables grouped.
13
https://www.fool.com/investing/2021/01/29/ibm-stock-had-terrible-q4-heres-why-still-a-buy/
Columns (blue and red)
refer to the left axis
(revenue and EBITDA).
Revenue has larger value
range.
The lines (green and
purple) refer to the right axis
(EPS and Dividend per
Share).
The per share measures are
significantly different (much
smaller in scale and value
range) from the first measure
(revenue).

http://en.wikipedia.org/wiki/Pareto_chart


https://en.wikipedia.org/wiki/Seven_basic_tools_of_quality

Pareto Chart
• Pareto chart is a special kind of dual axis combo chart with some
additional settings
–
Individual values are represented in descending order by bars/columns, and
the cumulative total (in %) is represented by the line.
– http://en.wikipedia.org/wiki/Pareto_chart
• Used intensively in quality control data visualizations
– https://en.wikipedia.org/wiki/Seven_basic_tools_of_quality
14

https://datahero.com/blog/2015/04/23/the-dos-and-donts-of-dual-axis-charts/


https://infogram.com/create/dual-axis-chart

Dual Axis (Combo) Chart Use Cases
• Absolute numbers with significant
value ranges
– Revenue vs. EPS
– Revenue vs. Dividend
– Student enrollment vs. faculty number
– Price per sq foot vs. Rent per sq foot
• Absolute numbers and relative ratio
data type
– Sales vs. growth percentage
– Profit vs. discount rate
– Sales vs. operating margin
– Revenue vs. market share
• Measure with different measuring units
– Temperature vs. rainfall
– Student enrollment vs. operational
budget
– Sales amount vs. number of stores
15
https://datahero.com/blog/2
015/04/23/the-dos-and-
donts-of-dual-axis-charts/
https://infogram.com/crea
te/dual-axis-chart

https://twitter.com/Tesla/status/1598490134357610496


https://twitter.com/alex_avoigt/status/1702652643565351309

Case 1
Battery %
(left)
+
elevation
(right)
16
https://twitter.com/Tesla/stat
us/1598490134357610496
https://twitter.com/alex_avoigt/status/1702
652643565351309

https://twitter.com/OpenskiesX/status/1695955072327536956


https://twitter.com/stevenmarkryan/status/1702879982698340847

Nested Combo Chart
17
https://twitter.com/OpenskiesX/sta
tus/1695955072327536956
Stacked bar +
line chart
https://twitter.com/stevenmarkryan
/status/1702879982698340847

https://www.statista.com/chart/28567/meta-operating-profit/

Case 2
• A second variable referring to the left axis –
use a second serials of red bars (negative
values)
18
https://www.statista.com/chart
/28567/meta-operating-profit/

https://twitter.com/piloly/status/1775192467161399352

19
https://twitter.com/piloly/status/1775192467161399352

https://twitter.com/piloly/status/1775259887376961914

A more complicated chart
20
https://twitter.com/piloly/status/1775259887376961914

https://public.tableau.com/app/profile/jonathan.drummey/viz/barsandlines/Introduction

More Variations
21
https://public.table
au.com/app/profil
e/jonathan.drumm
ey/viz/barsandline
s/Introduction
Design Questions
• Should I use a second axis?
– Are two axes using different measuring units, or
showing different value ranges?
• What marker (chart) types to use for each
data serial (variable)? What marker type is
best? Do I need to use different marker
type?
– Generally, lines for time related data
22
Best Practices and Pitfalls
• Design conventions
– Put the variable with larger value ranges to the left, and
the one with smaller ranges on the right.
– Use color help to associate with an axis
– See slide 9
• Column + Line design conventions
– Columns refer to the left axis, lines (or other marker
types) refers to the right axis
– Put the variable with larger value ranges to the left, and
the one with smaller ranges on the right.
• Pitfalls
– Two axes too close or similar in value ranges
• There is no need for a second axis
– Inappropriate marker/chart type
23

https://blog.datawrapper.de/dualaxis/


https://flourish.studio/blog/dual-axis-charts/

Cases against dual axis charts
• Dual axis is not the universal solution to all
cases.
• The following articles provides some cases
against dual axis charts and some
alternatives
– https://blog.datawrapper.de/dualaxis/
– https://flourish.studio/blog/dual-axis-charts/
24

https://flourish.studio/blog/dual-axis-charts/


https://twitter.com/stlouisfed/status/1617266021810724866

Case 3: Misperception
• Using the second
axis for
misperception
– https://flourish.stud
io/blog/dual-axis-
charts/
https://twitter.com/stlouisfed/st
atus/1617266021810724866

https://twitter.com/OpenskiesX/status/1695955072327536956

Visualize This Data (not
accurate, just examples)
– electric car sales and
market share
China
Europe USA
EV %
2023
7.2M
3.8M
2.2M
18.8%
2022
5.4M
3.2M
1.1M
13.7%
2021
3.1M
2.8M
0.8M
8.6%
…
…
…
…
…
https://twitter.com/OpenskiesX/s
tatus/1695955072327536956
Move this to reveal a potential
solution
Exercise 1

https://twitter.com/WTFViz/status/1458509947348602885


https://viz.wtf/post/667492909034225664/great-britain-wielka-brytania-got-to-have-its

Exercise 2
• Issues with this dual axis chart? How to
improve?
27
Great Britain (Wielka
Brytania) has its very own
right Y axis. Is this the right
way to use dual axis?
https://twitter.com/WTFViz/status/
1458509947348602885
https://viz.wtf/post/667492909034
225664/great-britain-wielka-
brytania-got-to-have-its

https://www.thedataschool.co.uk/robert-headington/combined-axis-vs-dual-axis

Exercise 3
• Issues with this dual axis combo chart? How
to improve?
28
https://www.thedataschool.co.uk/robert-headington/combined-axis-vs-dual-axis

https://public.tableau.com/app/profile/jack.zheng/viz/dualaxiscombochart-2measures/dualaxiscombo


https://public.tableau.com/app/profile/jack.zheng/viz/dualaxiscombochart-3measures/overlapcolumnnotstacked


https://www.youtube.com/watch?v=Kfwy9sAk_zY


https://evolytics.com/blog/tableau-201-how-to-make-a-dual-axis-combo-chart/


https://help.tableau.com/current/pro/desktop/en-us/qs_combo_charts.htm


https://help.tableau.com/current/pro/desktop/en-us/multiple_measures.htm


http://drawingwithnumbers.artisart.org/bars-and-lines/


https://www.thedataschool.co.uk/robert-headington/combined-axis-vs-dual-axis/


https://playfairdata.com/3-ways-to-use-dual-axis-combination-charts-in-tableau/

Making Dual Axis Combo Chart in Tableau
•
Tableau examples
– https://public.tableau.com/app/profile/jack.zheng/viz/dualaxiscombochart-2measures/dualaxiscombo
– https://public.tableau.com/app/profile/jack.zheng/viz/dualaxiscombochart-
3measures/overlapcolumnnotstacked
• Note there is a significant limitation in Tableau in making dual axis combo chart. Please
investigate it yourself and potential solutions.
• A complete tutorial
– https://www.youtube.com/watch?v=Kfwy9sAk_zY
– https://evolytics.com/blog/tableau-201-how-to-make-a-dual-axis-combo-chart/
• Official Tableau Help
– Build a Combination Chart https://help.tableau.com/current/pro/desktop/en-us/qs_combo_charts.htm
– Add Axes for Multiple Measures in Views https://help.tableau.com/current/pro/desktop/en-
us/multiple_measures.htm
• Various ways to combine bars and lines - need some hacks
– http://drawingwithnumbers.artisart.org/bars-and-lines/
• Others
– https://www.thedataschool.co.uk/robert-headington/combined-axis-vs-dual-axis/
– https://playfairdata.com/3-ways-to-use-dual-axis-combination-charts-in-tableau/
29

https://www.edocr.com/user/jgzheng/collection/datavisualizationlecturenotes


https://idi.kennesaw.edu/it7113

More Information
• https://www.edocr.com/user/jgzheng/collectio
n/datavisualizationlecturenotes
• https://idi.kennesaw.edu/it7113
30