Px.line + 2 add_bar not working

[Brent]

I am displaying a plotly express line like:
fig = px.line(pdf_df, x=‘Error’, y=‘Frequency’, color=‘distribution’, color_discrete_map=color_discrete_map,
hover_data=[‘mean’, ‘var’, ‘min_error’, ‘max_error’, ‘min_freq’, ‘max_freq’])

then I add a bar chart like:

fig.add_bar(x=distplot_df[‘x’], y=distplot_df[‘frequency’], marker_color=color, name=name)

This works fine and the bar chart is added and name is added to the legend. When I do another fig.add_bar with a slightly different bar chart with a different color and name, the name shows up in the legend but neither bar chart shows up. The first one happens to be black and the second one yellow.

However, when I click one of them off in the legend, the other one shows if it is still clicked on. I can toggle back and forth and see one or the other. They will not show up at the same time though. Neither one shows when they are both on in the legend.

Ideally, I would like to see them both at once and set the transparency to see where they overlap.

This is part of a large app and there is way too much code to post.

Any ideas?

[jlfsjunior]

Hi,

It could be something related to the bar width. You can try to set it manually and see if it fixes the problem. Otherwise, if you can provide a minimal example just with the figure and some fake data, it will be much easier to help.

[Brent]

I have been able to make a small example. It doesn’t behave exactly the same but it is close enough. When I run this code, first_hist and second_hist do not show up except for some edges. If you click on one or the other in the legend to turn them off, then the other one will show up but they will not both display at the same time. What I want is for them both to display and to be able to set the transparency of one of them so you can see through it.

#!/usr/bin/env python3

from dash import Dash, dcc, html
import pandas as pd
import plotly.express as px

def add_hist(figure, dataframe, color, name, update_axes=True):
    figure.add_bar(x=dataframe['x'], y=dataframe['frequency'], marker_color=color, name=name)
    if update_axes:
        figure.update_xaxes(range=[dataframe['x'].min(), dataframe['x'].max()])
        figure.update_yaxes(range=[0, dataframe['frequency'].max()])
    return figure

app = Dash(__name__)

pdf_df = pd.DataFrame({'Error': [-126122.995391,
                                 -91694.759702,
                                 -57266.524013,
                                 -22838.288325,
                                 11589.947364,
                                 46018.183052,
                                 80446.418741,
                                 114874.654430,
                                 149302.890118,
                                 183731.125807],
                       'Frequency': [3.881965e-08,
                                     1.668674e-07,
                                     8.474627e-07,
                                     6.211652e-06,
                                     1.010613e-05,
                                     1.190079e-06,
                                     2.238887e-07,
                                     5.078469e-08,
                                     1.289041e-08,
                                     3.539149e-09],
                       'distribution': ['dweibull',
                                        'dweibull',
                                        'dweibull',
                                        'dweibull',
                                        'dweibull',
                                        'dweibull',
                                        'dweibull',
                                        'dweibull',
                                        'dweibull',
                                        'dweibull']})

first_df = pd.DataFrame({'x': [-275840.2695,
                               -233774.7685,
                               -191709.2675,
                               -149643.7665,
                               -107578.2655,
                                -65512.7645,
                                -23447.2635,
                                 18618.2375,
                                 60683.7385,
                                102749.2395],
                         'frequency': [3.039955e-08,
                                       3.039955e-08,
                                       3.039955e-08,
                                       6.079910e-08,
                                       2.735960e-07,
                                       6.383906e-07,
                                       1.139983e-05,
                                       1.094384e-05,
                                       2.127969e-07,
                                       1.519978e-07]})
second_df = pd.DataFrame({'x': [-450283.850944,
                                -390631.552833,
                                -330979.254722,
                                -271326.956610,
                                -211674.658499,
                                -152022.360388,
                                 -92370.062276,
                                 -32717.764165,
                                  26934.533946,
                                  86586.832057],
                          'frequency': [2.143710e-08,
                                        4.287420e-08,
                                        2.143710e-07,
                                        1.500597e-07,
                                        3.429936e-07,
                                        1.157603e-06,
                                        2.820051e-06,
                                        1.309164e-06,
                                        5.903992e-06,
                                        4.801268e-06]})
FIGURE = px.line(pdf_df, x='Error', y='Frequency', color='distribution')
FIGURE = add_hist(FIGURE, first_df, 'black', 'first_hist')
FIGURE = add_hist(FIGURE, second_df, 'yellow', 'second_hist', update_axes=False)

app.layout = html.Div(dcc.Graph(id='dist-view', figure=FIGURE))

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

[Brent]

Has anyone run my sample? If so, do you see what I see? Any suggestions?

[jlfsjunior]

Hi,

Thanks for providing some code.

I just ran your example and I can see the histograms in both cases (see below), but as I mentioned in my previous comment, the bar width changes on the selection. (You can check that the black bars are centered in the same locations).

You can in principle adjust the width manually, so it won’t recompute when different traces are selected. This can be done by:

fig.update_traces(width=10000, selector=dict(type="bar"))

I picked an arbitrary value in the same order of magnitude of xaxis, but in a true histogram this should be the bin width or something meaningful.

You can use the same line above to update the opacity in both curves (with say, opacity=0.6).

Hope this helps!

[Brent]

Thank you. I set the width to the bin width and added the opacity and it is much better. In my actual application, when it was changing the bar widths, the bars were so thin they were not visible at all.