Overlayed Bar-Chart Hover-Problem

Dash Python
1

Hi everyone, I want to overlay bar charts on top of each other. To do this, I use the ‘base’-property of the Bar-Chart figure, to create offset, see the code and pictures below. The charts are looking good but there is a problem with the hover of the inner bars, if I use the hovermode=‘clsest’. As you can see on the first picture, if I hover on the right end of the inner bar, the hover information is correct but if I go to the left side of the inner bar, I get the hovertext of the outer Bar-Chart, which is wrong. How can I combat this problem ?

Hover-Good

hover_good
hover_good1558×419 63 KB

Hover-Bad

hover_bad
hover_bad1563×437 64.1 KB 

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Prototype'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [15], 'y': ['A'], 'type': 'bar', 'name': 'A', 'orientation': 'h'},
                {'x': [15], 'y': ['B'], 'type': 'bar', 'name': 'B', 'orientation': 'h'},
                {'x': [15], 'y': ['C'], 'type': 'bar', 'name': 'C', 'orientation': 'h'},
                {'x': [15], 'y': ['D'], 'type': 'bar', 'name': 'D', 'orientation': 'h'},
                ## Activations
                {'x': [4], 'y': ['B'], 'type': 'bar', 'base': 7, 'width': 0.5, 'orientation': 'h'},




            ],
            'layout': {
                'title': 'Dash Data Visualization',
                'barmode': 'stack',
                'hovermode': 'closest',


            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
2

Oh interesting - that’s not a use case we had considered. When there are overlapping bars we choose which one’s hover label wins by picking the one you’re closest to the “data end” of (the right side in this case, since the base is on the left). And in this case “closest” means “fraction of the bar size away” - but perhaps it would fix this case if we changed that to “number of pixels from the data end.”

@etienne do you think we should consider this a bug? Or would there be other unwanted side-effects of my proposed change? Any workarounds you can think of?

Here’s the relevant bit of code: https://github.com/plotly/plotly.js/blob/dbf02f1b47f2b0e17a1b78fabee815e3cde18715/src/traces/bar/hover.js#L99 - specifically the part (s - v) / (s - b) - 1)