Links

Create Vertical Barchart stacked

Tags: #plotly #chart #verticalbarchart #group #dataviz #snippet #operations #image #html
Author: Florent Ravenel
Description: This notebook provides instructions on how to create a vertical barchart with stacked bars using Plotly.

Input

Import libraries

import naas
import plotly.graph_objects as go
import pandas as pd

Variables

title = "Sales Evolution (stacked)"
# Output paths
output_image = f"{title}.png"
output_html = f"{title}.html"

Get data

x_axis = [
1995,
1996,
1997,
1998,
1999,
2000,
2001,
2002,
2003,
2004,
2005,
2006,
2007,
2008,
2009,
2010,
2011,
2012,
]
y_axis_value1 = [
219,
146,
112,
127,
124,
180,
236,
207,
236,
263,
350,
430,
474,
526,
488,
537,
500,
439,
]
y_axis_value2 = [
16,
13,
10,
11,
28,
37,
43,
55,
56,
88,
105,
156,
270,
299,
340,
403,
549,
499,
]
df1 = pd.DataFrame(zip(x_axis, y_axis_value1), columns=["LABEL", "VALUE"])
df1["GROUPS"] = "USA"
df2 = pd.DataFrame(zip(x_axis, y_axis_value2), columns=["LABEL", "VALUE"])
df2["GROUPS"] = "Rest of world"
df = pd.concat([df1, df2])
df

Model

Create Vertical Barchart stacked

def create_barchart(df, label, groups, value, title):
fig = go.Figure()
list_groups = df[groups].unique()
for group in list_groups:
tmp_df = df[df[groups] == group]
fig.add_trace(go.Bar(x=tmp_df[label], y=tmp_df[value], name=group))
fig.update_layout(
title=title,
plot_bgcolor="#ffffff",
width=1200,
height=800,
xaxis_tickfont_size=14,
legend=dict(bgcolor="white", bordercolor="white"),
barmode="stack",
bargap=0.1, # gap between bars of adjacent location coordinates.
bargroupgap=0.1, # gap between bars of the same location coordinate.
)
config = {"displayModeBar": False}
fig.show(config=config)
return df
fig = create_barchart(df, label="LABEL", groups="GROUPS", value="VALUE", title=title)

Output

Export in PNG and HTML

fig.write_image(output_image, width=1200)
fig.write_html(output_html)

Generate shareable assets

link_image = naas.asset.add(output_image)
link_html = naas.asset.add(output_html, {"inline": True})
# -> Uncomment the line below to remove your assets
# naas.asset.delete(output_image)
# naas.asset.delete(output_html)