Plotly Dash - Improve bar chart with vertical lines appearance

Question

I have a file with different types and their position:

Agent 1
Person 2
Place 3
Location 4

Also I have a bar chart (with 1 bar, which at the beginning is Agent ). I want to add some vertical lines (that appear in a legend) to the bar chart:

On the left I have another chart showing a hierarchy of types:

The idea is that when one of the types is selected it will change the selected type (I have not done the callback yet) and as you click on the types, see if the bar exceeds the vertical lines or not.

I haven't done the callback yet because first I want the right chart (bar chart + vertical lines) to look better. Now it is like this: As I said before, the bar that is shown at the beginning is Agent ( it does not matter to show the value of each type, what I want is to see graphically if it exceeds the vertical line or not ).

I have been looking for different ways to achieve this but I cannot get a visibly acceptable result. I would appreciate if someone would help me out with this.

As you don't have the files that I use to make the figures, I can take a code with example values. I would like an example that has 1 horizontal bar and at least 1 vertical line, but I would like it to look better than what I currently have

This is the code I have now:

def get_ontology_df():
   # Load dataframe
   df = pd.read_csv("ontologies.csv")
   return  df

def get_valid_types_df():
    # Load dataframe
    valid_types_df = pd.read_csv("valid_types.tsv", sep=' ',  names=["DBpedia type", "Nº entities", "Pos"])
    return valid_types_df

def get_ontology_figure():
    # Ontology treemap 
    fig2 =  go.Figure(go.Treemap(labels=ontology_df['labels'], parents=ontology_df['parents']))
    fig2.update_layout(margin=dict(t=0, b=0, r=0, l=0, pad=0), height=400, width=800)
    return fig2


def get_init_bar_figure_pos(df):
    # For displaying positional measures
    first_row=df.iloc[0]
    fig = go.Figure()
    fig.add_traces([
        go.Bar(x = [first_row[2]], y = [first_row[0]], width=[0.05] , orientation='h', marker_color='#A349A4', name = "DBpedia type"),
        go.Scatter(x=[0.1,0.1] , y=[first_row[0],5], line={'color' : '#FFC300', 'width' : 4}, name = 'Quartile 1')
        
        ])
    fig.update_layout(xaxis={'visible': False},yaxis={'range': [first_row[0], 7]}, margin=dict(t=0, b=0, r=0, l=0, pad=0), template = "simple_white")
    return fig



ontology_df = get_ontology_df()
valid_types = get_valid_types_df()

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) 
app.layout = html.Div(
    [
        html.H3("Positional measures"),
        html.Div([
         dcc.Graph(id='ontologyy', figure=get_ontology_figure(), style={'display': 'inline-block'}),
         dcc.Graph(id='es_instance_types', figure=get_init_bar_figure_pos(get_valid_types_df()), 
                                 style={'display': 'inline-block'})
        ]) 
    ]
    )

Thank you very much in advance

Answer 1

I have finally found an alternative, the vertical lines do not appear in the legend but aesthetically it looks better. I have used the vertical lines introduced in Plotly 4.12 :

 fig.add_vline(x=1, line_width=3, line_color="green",
 annotation_text="10th percentile", 
 annotation_position="bottom right")