Archived discussions · Captured October 28, 2026

Drawing a Bar chart with a line overlay

Thomas_SJun 05, 2015 #1

Ok, I am still rather new to Bokeh

I am trying to plot a bar chart with a line on top.
I can plot bar charts and I can plot line charts but I fail when it comes to their combination.
I thought the right strategy is to create a figure and append renderer, e.g.:

this code works fine:

bar = Bar(Z, [a.strftime(“%Y%m”) for a in Z.index], title=“Volatility”, stacked=True, xlabel=‘Time’)
show(bar)

this code won’t work

p1 = figure(plot_width=1000, plot_height=700)
p1.renderers.append(Bar(Z, [a.strftime(“%Y%m”) for a in Z.index], title=“Volatility”, stacked=True, xlabel=‘Time’))
show(p1)

given I can construct the Bar chart how can I combine it with a line chart?

thomas

⌁ Link to post

B_Eugene_SmithJun 05, 2015 #2

p1.line(...)?

⌁ Link to post

Sarah_Bird3Jun 05, 2015 #3

Hi Thomas,

A couple of things. Charts are really useful gateways into lots of things, but combining two together is often not going to be a great experience.

It is possible, in the way you were hinting at, to combine a Bar and a Dot chart.

See my notebook: http://nbviewer.ipython.org/github/birdsarah/bokeh-miscellany/blob/master/notebooks/Bar%20with%20a%20Line.ipynb

This is possible because both Bar & Dot create a categorical x-range. But a Line chart uses a Linear x-range so the two cannot map on top of each other.

If you can make some kind of line with the categorical range used from the bar chart (I’m not actually sure whether this is possible) then you should be able to stitch things together.

Otherwise you’re going to be stuck manually creating a bar chart as the Bar chart function does a lot of heavy lifting.

Hope this helps.

Bird

···

On Fri, Jun 5, 2015 at 6:03 PM, B. Eugene Smith mycotastic@gmail.com wrote:

p1.line(…)?

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/250822e6-ab20-461a-babc-790b1f78a1fe%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁ Link to post

Thomas_SJun 05, 2015 #4

Thanks Eugene

p1.line works but there is no p1.bar

···

On 5 June 2015 at 18:03, B. Eugene Smith mycotastic@gmail.com wrote:

p1.line(…)?

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/250822e6-ab20-461a-babc-790b1f78a1fe%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁ Link to post

BryanJun 05, 2015 #5

Thomas,

The two functions are from different APIs. "Bar" is a high level interface from bokeh.charts. By contrast "line" is a mid-level interface from bokeh.plotting. We are specifically working on being able to combine multiple multiple charts together easily as the next main feature of the charts API, but it is not done yet, and I am not sure when that work will be completed. For the time being I would suggest using "p.rect" or "p.quad" to construct the bar chart by hand.

Bryan

···

On Jun 5, 2015, at 1:05 PM, Thomas S <thomas.schmelzer@gmail.com> wrote:

Thanks Eugene
p1.line works but there is no p1.bar

On 5 June 2015 at 18:03, B. Eugene Smith <mycotastic@gmail.com> wrote:
p1.line(...)?

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/250822e6-ab20-461a-babc-790b1f78a1fe%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAB0-brOSqim8Nt_2tbUhL7f3%3DjxEtOcoWBsQ25TwyoyuBgsOJw%40mail.gmail.com\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

Thomas_SJun 05, 2015 #6

Sarah, thank you so much for all the time invested in your answer. I don’t see the reason yet why a categorical x-range can’t be used to construct something as simple as a line. In my case this range is a set of points in time.
thomas

···

On Friday, 5 June 2015 18:36:47 UTC+2, Sarah Bird wrote:

Hi Thomas,

A couple of things. Charts are really useful gateways into lots of things, but combining two together is often not going to be a great experience.

It is possible, in the way you were hinting at, to combine a Bar and a Dot chart.

See my notebook: http://nbviewer.ipython.org/github/birdsarah/bokeh-miscellany/blob/master/notebooks/Bar%20with%20a%20Line.ipynb

This is possible because both Bar & Dot create a categorical x-range. But a Line chart uses a Linear x-range so the two cannot map on top of each other.

If you can make some kind of line with the categorical range used from the bar chart (I’m not actually sure whether this is possible) then you should be able to stitch things together.

Otherwise you’re going to be stuck manually creating a bar chart as the Bar chart function does a lot of heavy lifting.

Hope this helps.

Bird

On Fri, Jun 5, 2015 at 6:03 PM, B. Eugene Smith mycot...@gmail.com wrote:

p1.line(…)?

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/250822e6-ab20-461a-babc-790b1f78a1fe%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁ Link to post

Thomas_SJun 05, 2015 #7

Bryan,
I will certainly keep an eye on Bokeh. You guys are doing good work here and I would be delighted to switch off some of my JavaScript gymnastics. For now that would be too early though

···

On Friday, 5 June 2015 22:18:23 UTC+2, Bryan Van de ven wrote:

Thomas,

The two functions are from different APIs. “Bar” is a high level interface from bokeh.charts. By contrast “line” is a mid-level interface from bokeh.plotting. We are specifically working on being able to combine multiple multiple charts together easily as the next main feature of the charts API, but it is not done yet, and I am not sure when that work will be completed. For the time being I would suggest using “p.rect” or “p.quad” to construct the bar chart by hand.

Bryan

On Jun 5, 2015, at 1:05 PM, Thomas S thomas.s...@gmail.com wrote:

Thanks Eugene

p1.line works but there is no p1.bar

On 5 June 2015 at 18:03, B. Eugene Smith mycot...@gmail.com wrote:

p1.line(…)?

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/250822e6-ab20-461a-babc-790b1f78a1fe%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAB0-brOSqim8Nt_2tbUhL7f3%3DjxEtOcoWBsQ25TwyoyuBgsOJw%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁ Link to post

BryanJun 05, 2015 #8

Are the data between the discrete points labeled by the categories actually linear in between the points? Are all the category values evenly spaced? Not saying it's never appropriate but there a lots of pitfalls and out of all the possible ways, only a few "correct" uses of lines on categorical ranges IMO.

Bryan

···

On Jun 5, 2015, at 3:35 PM, Thomas S <thomas.schmelzer@gmail.com> wrote:

Sarah, thank you so much for all the time invested in your answer. I don't see the reason yet why a categorical x-range can't be used to construct something as simple as a line. In my case this range is a set of points in time.
thomas

On Friday, 5 June 2015 18:36:47 UTC+2, Sarah Bird wrote:
Hi Thomas,

A couple of things. Charts are really useful gateways into lots of things, but combining two together is often not going to be a great experience.

It is possible, in the way you were hinting at, to combine a Bar and a Dot chart.

See my notebook: http://nbviewer.ipython.org/github/birdsarah/bokeh-miscellany/blob/master/notebooks/Bar%20with%20a%20Line.ipynb

This is possible because both Bar & Dot create a categorical x-range. But a Line chart uses a Linear x-range so the two cannot map on top of each other.

If you can make some kind of line with the categorical range used from the bar chart (I'm not actually sure whether this is possible) then you should be able to stitch things together.

Otherwise you're going to be stuck manually creating a bar chart as the Bar chart function does a lot of heavy lifting.

Hope this helps.

Bird

On Fri, Jun 5, 2015 at 6:03 PM, B. Eugene Smith <mycot...@gmail.com> wrote:
p1.line(...)?

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
To post to this group, send email to bo...@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/250822e6-ab20-461a-babc-790b1f78a1fe%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/b6b38dd2-d0b8-4f25-86e1-9d538321d4bf%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

BryanJun 05, 2015 #9

Thomas,

I'm not sure I understand, what is too early? It's pretty trivially simple to create a bar chart with the quad or rect methods. Maybe it's three lines of code, instead of one. For reference, here are lots of "by hand" histograms with lines together:

http://bokeh.pydata.org/en/latest/docs/gallery/histogram.html

In this case, it's still just one line of code:

p2.quad(top=hist, bottom=0, left=edges[:-1], right=edges[1:], fill_color="#036564", line_color="#033649")

with "quad" instead of "Bar". The "rect" method would be maybe even simpler for a bar chart. If you need grouping or stacking it's a tiny amount of extra work.

Bryan

···

On Jun 5, 2015, at 3:37 PM, Thomas S <thomas.schmelzer@gmail.com> wrote:

Bryan,
I will certainly keep an eye on Bokeh. You guys are doing good work here and I would be delighted to switch off some of my JavaScript gymnastics. For now that would be too early though

On Friday, 5 June 2015 22:18:23 UTC+2, Bryan Van de ven wrote:
Thomas,

The two functions are from different APIs. "Bar" is a high level interface from bokeh.charts. By contrast "line" is a mid-level interface from bokeh.plotting. We are specifically working on being able to combine multiple multiple charts together easily as the next main feature of the charts API, but it is not done yet, and I am not sure when that work will be completed. For the time being I would suggest using "p.rect" or "p.quad" to construct the bar chart by hand.

Bryan

> On Jun 5, 2015, at 1:05 PM, Thomas S <thomas.s...@gmail.com> wrote:
>
> Thanks Eugene
> p1.line works but there is no p1.bar
>
>
> On 5 June 2015 at 18:03, B. Eugene Smith <mycot...@gmail.com> wrote:
> p1.line(...)?
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/250822e6-ab20-461a-babc-790b1f78a1fe%40continuum.io\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
>
>
>
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAB0-brOSqim8Nt_2tbUhL7f3%3DjxEtOcoWBsQ25TwyoyuBgsOJw%40mail.gmail.com\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/7a6f184c-b4cf-47cb-b278-cecda9de4f26%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

systemJul 21, 2021 #10

⌁ Link to post

End of archived discussion · Replies are disabled