Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bokeh: Display only a single tooltip

I'm facing a problem related to display properly the tooltip of the HoverTool in my Bokeh Plotting. My intention is to display only a single one, using the attribute:

mode = vline

As the desired plot is shown bellow: Desired Plot

However, my plot is rendering one tooltip for each glyph (series) that the vline crosses during the interaction with the Figure, as it can be seen:

Triple tooltip rendered

Even when I change the attribute Mode to "mouse", the Figure continue to render more than one tooltip:

Double tooltip

My code: [an assembly function, part of a bigger project]

from bokeh.models import (HoverTool,
                          ColumnDataSource,
                          Title,
                          DatetimeTickFormatter)
import pandas as pd
from bokeh.io import show, output_file
from bokeh.plotting import figure


def assembly_chart(df, complements):
    """function to assembly the chart"""

    output_file("movigrama_chart.html")

    source = ColumnDataSource(df)

    p = figure(x_axis_type='datetime',
               x_axis_label='days of moviment',
               y_axis_label='unities movimented',
               plot_width=1230,
               plot_height=500,
               active_scroll='wheel_zoom')

    p.vbar(x='DT',
           bottom=0,
           top='STOCK',
           width=pd.Timedelta(days=1),
           fill_alpha=0.4,
           color='#99d8c9',
           source=source)

    p.vbar(x='DT',
           bottom=0,
           top='SOMA_SAI',
           width=pd.Timedelta(days=1),
           fill_alpha=0.8,
           color='crimson',
           source=source)

    p.vbar(x='DT',
           bottom=0,
           top='SOMA_ENTRA',
           width=pd.Timedelta(days=1),
           fill_alpha=0.8,
           color='seagreen',
           source=source)

    p.add_layout(Title(text=complements['warehouse'],
                       text_font='helvetica',
                       text_font_size='10pt',
                       text_color='orangered',
                       text_alpha=0.5,
                       align='center',
                       text_font_style="italic"), 'above')
    p.add_layout(Title(text=complements['product'],
                       text_font='helvetica',
                       text_font_size='10pt',
                       text_color='orangered',
                       text_alpha=0.5,
                       align='center',
                       text_font_style="italic"), 'above')
    p.add_layout(Title(text='Movigrama Endicon',
                       text_font='helvetica',
                       text_font_size='16pt',
                       text_color='orangered',
                       text_alpha=0.9,
                       align='center',
                       text_font_style="bold"), 'above')

    p.x_range.range_padding = 0.1
    p.y_range.range_padding = 0.1

    p.outline_line_width = 4
    p.outline_line_alpha = 0.1
    p.outline_line_color = 'orangered'

    p.axis.major_label_text_color = 'gray'
    p.axis.major_label_text_font_style = 'bold'

    p.axis.axis_label_text_color = 'gray'
    p.axis.axis_label_text_font_style = 'bold'

    p.axis.major_tick_out = 10
    p.axis.minor_tick_in = -3
    p.axis.minor_tick_out = 6
    p.axis.minor_tick_line_color = 'gray'

    p.xaxis.formatter = DatetimeTickFormatter(
                days=['%d/%m'],
                months=['%m/%Y'],
                years=['%Y'])

    # iniciate hover object
    hover = HoverTool()
    hover.mode = 'vline'  # activate hover by vertical line
    hover.tooltips = [("IN", "@SOMA_ENTRA"),
                      ("OUT", "@SOMA_SAI"),
                      ("STOCK", "@STOCK"),
                      ("DT", "@DT{%d/%m/%Y}")]
    # use 'datetime' formatter for 'DT' field
    hover.formatters = {"DT": 'datetime'}
    p.add_tools(hover)

    show(p)
like image 680
Arnold Souza Avatar asked Nov 15 '25 11:11

Arnold Souza


1 Answers

You can define which glyphrenderer you want to attach to your hover tool. for that, first name your glyphs e.g.

r1 = p.vbar(...)

Then add renderers argument to hover-

hover.renderers =[r1]

See the entire code below-

from bokeh.models import (HoverTool,
                          ColumnDataSource,
                          Title,
                          DatetimeTickFormatter)
import pandas as pd
from bokeh.io import show, output_file
from bokeh.plotting import figure


def assembly_chart(df, complements):
    """function to assembly the chart"""

    output_file("movigrama_chart.html")

    source = ColumnDataSource(df)

    p = figure(x_axis_type='datetime',
               x_axis_label='days of moviment',
               y_axis_label='unities movimented',
               plot_width=1230,
               plot_height=500,
               active_scroll='wheel_zoom')

    r1 = p.vbar(x='DT',
           bottom=0,
           top='STOCK',
           width=pd.Timedelta(days=1),
           fill_alpha=0.4,
           color='#99d8c9',
           source=source)

    r2 = p.vbar(x='DT',
           bottom=0,
           top='SOMA_SAI',
           width=pd.Timedelta(days=1),
           fill_alpha=0.8,
           color='crimson',
           source=source)

    r3 = p.vbar(x='DT',
           bottom=0,
           top='SOMA_ENTRA',
           width=pd.Timedelta(days=1),
           fill_alpha=0.8,
           color='seagreen',
           source=source)

    p.add_layout(Title(text=complements['warehouse'],
                       text_font='helvetica',
                       text_font_size='10pt',
                       text_color='orangered',
                       text_alpha=0.5,
                       align='center',
                       text_font_style="italic"), 'above')
    p.add_layout(Title(text=complements['product'],
                       text_font='helvetica',
                       text_font_size='10pt',
                       text_color='orangered',
                       text_alpha=0.5,
                       align='center',
                       text_font_style="italic"), 'above')
    p.add_layout(Title(text='Movigrama Endicon',
                       text_font='helvetica',
                       text_font_size='16pt',
                       text_color='orangered',
                       text_alpha=0.9,
                       align='center',
                       text_font_style="bold"), 'above')

    p.x_range.range_padding = 0.1
    p.y_range.range_padding = 0.1

    p.outline_line_width = 4
    p.outline_line_alpha = 0.1
    p.outline_line_color = 'orangered'

    p.axis.major_label_text_color = 'gray'
    p.axis.major_label_text_font_style = 'bold'

    p.axis.axis_label_text_color = 'gray'
    p.axis.axis_label_text_font_style = 'bold'

    p.axis.major_tick_out = 10
    p.axis.minor_tick_in = -3
    p.axis.minor_tick_out = 6
    p.axis.minor_tick_line_color = 'gray'

    p.xaxis.formatter = DatetimeTickFormatter(
                days=['%d/%m'],
                months=['%m/%Y'],
                years=['%Y'])

    # iniciate hover object
    hover = HoverTool()
    hover.mode = 'vline'  # activate hover by vertical line
    hover.tooltips = [("IN", "@SOMA_ENTRA"),
                      ("OUT", "@SOMA_SAI"),
                      ("STOCK", "@STOCK"),
                      ("DT", "@DT{%d/%m/%Y}")]
    # use 'datetime' formatter for 'DT' field
    hover.formatters = {"DT": 'datetime'}
    hover.renderers = [r1]
    p.add_tools(hover)

    show(p)
like image 105
Aritesh Avatar answered Nov 18 '25 05:11

Aritesh



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!