Overlapping legend when create plot with matplotlib and mpld3 in python

Question

I'm a beginner in the world of python programming and I'm having a really hard time figuring out how to tackle my problem.

The problem is when I created a plot using loop in python with matplotlib and mpld3, the plot is as I expected it to be but the legend of the plot is really wrong because the legends were overlapping with each other. The legend of the plot will be displayed for the latest data only because other data's legend is overlapped on it.

Below is the picture of my plot:

This is the code to create the plot and legend in loop:

plt.rcParams.update({'font.size': 13})
fig, ax = plt.subplots()
for i in range(3,5):
        rd1 = pd.read_sql_query("SELECT press, rs FROM basic_chart WHERE 
        cs = "+str(i), app.config['SQLALCHEMY_DATABASE_URI'])
        print(rd1)
        pt = ax.plot(rd1['press'],rd1['rs'],'-o')
        plugins.connect(fig, plugins.InteractiveLegendPlugin([pt],[str(i)]))
html = mpld3.fig_to_html(fig)

I think that the main problem is on the interactive legend code but I did not manage to figure out the right way to correct it. I really hope experts can help me in this problem.

Answer 1

plt.rcParams.update({'font.size': 13})
fig, ax = plt.subplots()
for i in range(3,5):
    rd1 = pd.read_sql_query("SELECT press, rs FROM basic_chart WHERE 
    cs = "+str(i), app.config['SQLALCHEMY_DATABASE_URI'])
    print(rd1)
    pt = ax.plot(rd1['press'],rd1['rs'],'-o')

axhandles, axlabels = ax.get_legend_handles_labels()
plugins.connect(fig, plugins.InteractiveLegendPlugin(axhandles, axlabels))
html = mpld3.fig_to_html(fig)

By having the plugins.connect in the loop, you are creating two separate legends. After plotting, get the handles and labels from the plot and use that in the call to the InteractiveLegendPlugin.