Search bar for Plotly Legends (No Dash)

đź“Š Plotly Python
1

Greetings,

I have a Figure object with many traces such that the legend is quite unruly. Is there (or could there eventually be) any way to introduce a search bar for the legends without using Dash? Thanks!

2

Agree this would be extremely useful! (have not found this functionality to date)

The temporary workaround I use for this w/ a >~1500 item legend involves “serializing the legend with a prefix”, combined with using hover to display that column. It allows you to get to a specific row in the legend easily/quickly/ repeatably

  1. Use value_counts() to build a pandas df w/ the unique legend items, sorted
unq_legend_df = pd.DataFrame(your_df['col_choice'].value_counts()).reset_index().sort_values('col_choice').reset_index(drop=True)
  1. String concatenate the index of the df to the unique list w/ an underscore
unq_legend_df['col_choice_pre'] = unq_legend_df.index.astype(str)+'_'+unq_legend_df['col_choice']
  1. Merge the dataframe back into your primary dataframe
new_df = pd.merge(your_df, unq_legend_df, how='left',on='col_choice').sort_values('col_choice')
  1. set your color value of your plotly graph to
col_choice_pre       
#aka  this column ==== new_df['col_choice_pre']
3

Do you have an example of what this looks like?

It looks like someone brighter than me could probably code something up fairly easily in BeautifulSoup that adds the right JavaScript functionality for this. I, myself am able to play with the div elements’ attributes and toggle traces on/off. The question would be, what is the easiest way to accomplish the goal i.e. does the search bar itself toggle the traces or does it change what is displayed in the legend and the user toggles normally. This would be a fun little project

4

See below. Though the example only shows 5 lines, you can imagine with 1500+ lines/ scatter series representing lines, allows you to:

  1. find your point of interest with hover & make note of the “serialized number prefix”
  2. go to the legend and scroll (not the mouse wheel b/c it is too coarse of resolution)
  3. find your point, and isolate it (quickly and repeatably without having to worry about the full label of the series is, and instead just go off the prefix number)
import pandas as pd
import plotly.express as px


#build the dummy data list
import itertools
import numpy as np
val = list(range(11))
x_lst = list(itertools.chain(val,val,val,val,val))
y_lst = list(itertools.chain(val,list(np.array(val)*-1),list(np.array(val)*2),reversed(val), reversed(list(np.array(val)*2))))
col_lst = list(itertools.chain(['aaa']*11,['bbb']*11,['ccc']*11,['ddd']*11,['eee']*11))

your_df = pd.DataFrame({'x_val':x_lst,'y_val':y_lst,'col_choice':col_lst})

#the useful part from above
unq_legend_df = pd.DataFrame(your_df['col_choice'].value_counts()).reset_index().sort_values('col_choice').reset_index(drop=True)
unq_legend_df['col_choice_pre'] = unq_legend_df.index.astype(str)+'_'+unq_legend_df['col_choice']
new_df = pd.merge(your_df, unq_legend_df, how='left',on='col_choice').sort_values('col_choice')

#the figure
fig = px.scatter(new_df, x='x_val',y='y_val',title='Serializing the Legend - Example', color = 'col_choice_pre')
fig.show()