Skip to content

replace rgb codes with CSS colors including plotly recommended colors #5175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: doc-prod
Choose a base branch
from
Open

replace rgb codes with CSS colors including plotly recommended colors #5175

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b12a4e2
replace rgb codes with CSS colors including plotly recommended colors
rl-utility-man May 9, 2025
123c6b9
deleted stray comment
rl-utility-man Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 23 additions & 26 deletions doc/python/horizontal-bar-charts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ fig.add_trace(go.Bar(
name='SF Zoo',
orientation='h',
marker=dict(
color='rgba(246, 78, 139, 0.6)',
line=dict(color='rgba(246, 78, 139, 1.0)', width=3)
color='hotpink',
line=dict(color='deeppink', width=3)
)
))
fig.add_trace(go.Bar(
Expand All @@ -101,8 +101,8 @@ fig.add_trace(go.Bar(
name='LA Zoo',
orientation='h',
marker=dict(
color='rgba(58, 71, 80, 0.6)',
line=dict(color='rgba(58, 71, 80, 1.0)', width=3)
color='dimgray',
line=dict(color='black', width=3)
)
))

Expand All @@ -118,10 +118,7 @@ import plotly.graph_objects as go
top_labels = ['Strongly<br>agree', 'Agree', 'Neutral', 'Disagree',
'Strongly<br>disagree']

colors = ['rgba(38, 24, 74, 0.8)', 'rgba(71, 58, 131, 0.8)',
'rgba(122, 120, 168, 0.8)', 'rgba(164, 163, 204, 0.85)',
'rgba(190, 192, 213, 1)']

colors = ['DarkBlue', 'MediumBlue', 'cyan', 'mediumpurple', 'thistle']
x_data = [[21, 30, 21, 16, 12],
[24, 31, 19, 15, 11],
[27, 26, 23, 11, 13],
Expand All @@ -142,7 +139,7 @@ for i in range(0, len(x_data[0])):
orientation='h',
marker=dict(
color=colors[i],
line=dict(color='rgb(248, 248, 249)', width=1)
line=dict(color='ghostwhite', width=1)
)
))

Expand All @@ -161,8 +158,8 @@ fig.update_layout(
zeroline=False,
),
barmode='stack',
paper_bgcolor='rgb(248, 248, 255)',
plot_bgcolor='rgb(248, 248, 255)',
paper_bgcolor='lavenderblush',
plot_bgcolor='lavenderblush',
margin=dict(l=120, r=10, t=140, b=80),
showlegend=False,
)
Expand All @@ -176,22 +173,22 @@ for yd, xd in zip(y_data, x_data):
xanchor='right',
text=str(yd),
font=dict(family='Arial', size=14,
color='rgb(67, 67, 67)'),
color='dimgray'),
showarrow=False, align='right'))
# labeling the first percentage of each bar (x_axis)
annotations.append(dict(xref='x', yref='y',
x=xd[0] / 2, y=yd,
text=str(xd[0]) + '%',
font=dict(family='Arial', size=14,
color='rgb(248, 248, 255)'),
color='white'),
showarrow=False))
# labeling the first Likert scale (on the top)
if yd == y_data[-1]:
annotations.append(dict(xref='x', yref='paper',
x=xd[0] / 2, y=1.1,
text=top_labels[0],
font=dict(family='Arial', size=14,
color='rgb(67, 67, 67)'),
color='dimgray'),
showarrow=False))
space = xd[0]
for i in range(1, len(xd)):
Expand All @@ -200,15 +197,15 @@ for yd, xd in zip(y_data, x_data):
x=space + (xd[i]/2), y=yd,
text=str(xd[i]) + '%',
font=dict(family='Arial', size=14,
color='rgb(248, 248, 255)'),
color=f"{'white'*(i<2)}{'black'*(i>=2)}"),
Copy link
Member

@LiamConnors LiamConnors Jun 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this f-string for the color? Could it not just be a named color that is close to rgb(248, 248, 255)?

Copy link
Contributor Author

@rl-utility-man rl-utility-man Jun 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is color of the text that goes on the bars, which is currently CSS GhostWhite and is already has less than ideal contrast with lightest bar. When I went to CSS colors, I ended up with bigger differences between the lightest and darkest bars and struggled to find one color that had enough contrast for all of them. I make the text on the first two bars white and the text on the last three bars black to provide adequate contrast.

Original:
image

Proposed:
image

Here is the proposed bar graph with all white text -- the middle bar in particular is nearly illegible. Yellow and gray perform similarly.
image

Here's a potential alternative fix --swapping Cyan for DarkSlateBlue and then using all white text
image

I welcome thoughts. I am happy to comment this to explain, perhaps: "make the text on the first two bars white and the text on the last three bars black to provide adequate contrast." I use this style of conditional F-string a fair bit in my production code and this is a fairly rich, polished example where it might be helpful to show that technique.

showarrow=False))
# labeling the Likert scale
if yd == y_data[-1]:
annotations.append(dict(xref='x', yref='paper',
x=space + (xd[i]/2), y=1.1,
text=top_labels[i],
font=dict(family='Arial', size=14,
color='rgb(67, 67, 67)'),
color='dimgray'),
showarrow=False))
space += xd[i]

Expand Down Expand Up @@ -314,9 +311,9 @@ fig.add_trace(go.Bar(
x=y_saving,
y=x,
marker=dict(
color='rgba(50, 171, 96, 0.6)',
color='mediumseagreen',
line=dict(
color='rgba(50, 171, 96, 1.0)',
color='seagreen',
width=1),
),
name='Household savings, percentage of household disposable income',
Expand All @@ -326,7 +323,7 @@ fig.add_trace(go.Bar(
fig.add_trace(go.Scatter(
x=y_net_worth, y=x,
mode='lines+markers',
line_color='rgb(128, 0, 128)',
line_color='purple',
name='Household net worth, Million USD/capita',
), 1, 2)

Expand All @@ -342,7 +339,7 @@ fig.update_layout(
showgrid=False,
showline=True,
showticklabels=False,
linecolor='rgba(102, 102, 102, 0.8)',
linecolor='gray',
linewidth=2,
domain=[0, 0.85],
),
Expand All @@ -364,8 +361,8 @@ fig.update_layout(
),
legend=dict(x=0.029, y=1.038, font_size=10),
margin=dict(l=100, r=20, t=70, b=70),
paper_bgcolor='rgb(248, 248, 255)',
plot_bgcolor='rgb(248, 248, 255)',
paper_bgcolor='lavenderblush',
plot_bgcolor='lavenderblush',
)

annotations = []
Expand All @@ -380,14 +377,14 @@ for ydn, yd, xd in zip(y_nw, y_s, x):
y=xd, x=ydn - 20000,
text='{:,}'.format(ydn) + 'M',
font=dict(family='Arial', size=12,
color='rgb(128, 0, 128)'),
color='purple'),
showarrow=False))
# labeling the bar net worth
annotations.append(dict(xref='x1', yref='y1',
y=xd, x=yd + 3,
text=str(yd) + '%',
font=dict(family='Arial', size=12,
color='rgb(50, 171, 96)'),
font=dict(family='Arial', size=16,
color='mediumseagreen'),
showarrow=False))
# Source
annotations.append(dict(xref='paper', yref='paper',
Expand All @@ -396,7 +393,7 @@ annotations.append(dict(xref='paper', yref='paper',
'(2015), Household savings (indicator), ' +
'Household net worth (indicator). doi: ' +
'10.1787/cfc6f499-en (Accessed on 05 June 2015)',
font=dict(family='Arial', size=10, color='rgb(150,150,150)'),
font=dict(family='Arial', size=10, color='gray'),
showarrow=False))

fig.update_layout(annotations=annotations)
Expand Down