From 5e44c629f3998a5693a7585dc8bc8236428cff1e Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Fri, 6 Jun 2025 14:41:01 +0200
Subject: [PATCH 1/2] use stack when adding 2 vbars to same plot
---
notebooks/06_data_sources.ipynb | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/notebooks/06_data_sources.ipynb b/notebooks/06_data_sources.ipynb
index 9b6de1f..efd9261 100644
--- a/notebooks/06_data_sources.ipynb
+++ b/notebooks/06_data_sources.ipynb
@@ -295,6 +295,7 @@
"source": [
"from bokeh.plotting import figure, show\n",
"from bokeh.models import ColumnDataSource\n",
+ "from bokeh.transform import stack\n",
"\n",
"# create ColumnDataSource based on DataFrame from the demo data set\n",
"source = ColumnDataSource(monthly_values_df)\n",
@@ -316,8 +317,12 @@
"# create a second line renderer with data from a different column\n",
"p.vbar(\n",
" x=\"month_name\", # use the sequence of strings from the \"month_name\" column as categories\n",
- " top=\"passengers\", # use the sequence of values from the \"passengers\" column as values\n",
- " # top=\"mail\", # 🔁 use this line instead of the one above to use data from the \"mail\" column\n",
+ " bottom=\"freight\", # draw the second bar starting from the first, otherwise it will be drawn on top of and occlude part of the first bar\n",
+ " top=stack( # stack adds values together\n",
+ " \"freight\",\n",
+ " \"passengers\", # use the sequence of values from the \"passengers\" column as values\n",
+ " # \"mail\", # 🔁 use this line instead of the one above to use data from the \"mail\" column\n",
+ " ),\n",
" width=0.9,\n",
" color=\"tomato\",\n",
" source=source,\n",
From 5b3df56e115e5a04aa69cbfe088e3e204e2451fa Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Mon, 9 Jun 2025 16:24:28 +0200
Subject: [PATCH 2/2] vbar_stack
---
notebooks/06_data_sources.ipynb | 32 +++++++++++++-------------------
1 file changed, 13 insertions(+), 19 deletions(-)
diff --git a/notebooks/06_data_sources.ipynb b/notebooks/06_data_sources.ipynb
index efd9261..e1fdeb7 100644
--- a/notebooks/06_data_sources.ipynb
+++ b/notebooks/06_data_sources.ipynb
@@ -295,39 +295,33 @@
"source": [
"from bokeh.plotting import figure, show\n",
"from bokeh.models import ColumnDataSource\n",
- "from bokeh.transform import stack\n",
+ "from bokeh.palettes import HighContrast3\n",
"\n",
"# create ColumnDataSource based on DataFrame from the demo data set\n",
"source = ColumnDataSource(monthly_values_df)\n",
"\n",
"# set up the figure\n",
"p = figure(\n",
- " height=300,\n",
" x_range=source.data[\"month_name\"], # use the sequence of strings from the \"month_name\" column as categories\n",
+ " width=750,\n",
")\n",
"\n",
- "# create a line renderer with data from the \"freight\" column\n",
- "p.vbar(\n",
- " x=\"month_name\", # use the sequence of strings from the \"month_name\" column as categories\n",
- " top=\"freight\", # use the sequence of values from the \"freight\" column as values\n",
- " width=0.9,\n",
- " source=source,\n",
- ")\n",
+ "# plot values from these columns\n",
+ "columns = [\"freight\", \"passengers\", \"mail\"]\n",
"\n",
- "# create a second line renderer with data from a different column\n",
- "p.vbar(\n",
- " x=\"month_name\", # use the sequence of strings from the \"month_name\" column as categories\n",
- " bottom=\"freight\", # draw the second bar starting from the first, otherwise it will be drawn on top of and occlude part of the first bar\n",
- " top=stack( # stack adds values together\n",
- " \"freight\",\n",
- " \"passengers\", # use the sequence of values from the \"passengers\" column as values\n",
- " # \"mail\", # 🔁 use this line instead of the one above to use data from the \"mail\" column\n",
- " ),\n",
+ "# use vbar_stack that stacks multiple vbar renderers\n",
+ "p.vbar_stack(\n",
+ " columns,\n",
+ " x=\"month_name\",\n",
" width=0.9,\n",
- " color=\"tomato\",\n",
" source=source,\n",
+ " color=HighContrast3, # use the HighContrast color palette\n",
+ " legend_label=columns,\n",
")\n",
"\n",
+ "# move legend to left, to avoid overlap with bars\n",
+ "p.legend.location = \"top_left\"\n",
+ "\n",
"show(p)"
]
},