Search code examples
pythonmatplotlibplotmpld3

How to add new line to the hover label in python plot?

I want to add the text with new line when specific point is hovered in the plot.For example if A point is hovered then the hovered label will display text like this, text1
text2
text3
Below is draw_plot function snippet:

   def draw_plot(ue_info,selected_parm):

            rp_x = [-1.0,0.0,1.0,-1.0,0.0,1.0,-1.0,0.0,1.0,-1.0,0.0,1.0]
            rp_y = [1.5,1.5,1.5,0.5,0.5,0.5,-0.5,-0.5,-0.5,-1.5,-1.5,-1.5]
            Cluster = np.array([1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1])

            fig = plt.figure()
            ax = fig.add_subplot(111)
            scatter = ax.scatter(rp_x,rp_y,c=Cluster,s=50)
            fig.patch.set_visible(False)
            ax.axis('off')
            ax.set_autoscale_on(False)

            ue_offset  = 0.2

            for ue in ue_info:
                    try:
                            i = rand.uniform(rp_x[int(ue_info[ue]["pr_rp_id"])]-ue_offset,rp_x[int(ue_info[ue]["pr_rp_id"])]+ue_offset)
                            j = rand.uniform(rp_y[int(ue_info[ue]["pr_rp_id"])]-ue_offset,rp_y[int(ue_info[ue]["pr_rp_id"])]+ue_offset)
                            if float(ue_info[ue][selected_parm]) < 20.0:
                                    ues = ax.scatter(i,j,s=50,c='green',marker='+')
                            if float(ue_info[ue][selected_parm]) < 21.0:
                                    ues = ax.scatter(i,j,s=50,c='orange',marker='+')
                            else:
                                    ues = ax.scatter(i,j,s=50,c='red',marker='+')
                            ueLabel = "UE:"+ue +"\n" +" pr_rp_id:"+ ue_info[ue]["pr_rp_id"]
                            tooltip = mpld3.plugins.PointLabelTooltip(ues,labels=[ueLabel])
                            mpld3.plugins.connect(fig, tooltip)
                    except:
                            print "One of the UE is removed while drawing the plot..."

            tooltip = mpld3.plugins.PointLabelTooltip(scatter)
            mpld3.plugins.connect(fig, tooltip)

            plt.text(-1.0, 1.7, "RP0", fontsize=8)
            plt.text(0.0, 1.7, "RP1", fontsize=8)
            plt.text(1.0, 1.7, "RP2", fontsize=8)
            plt.text(-1.0, 0.7, "RP3", fontsize=8)
            plt.text(0.0, 0.7, "RP4", fontsize=8)
            plt.text(1.0, 0.7, "RP5", fontsize=8)
            plt.text(-1.0,-0.3, "RP6", fontsize=8)
            plt.text(0.0, -0.3, "RP7", fontsize=8)
            plt.text(1.0, -0.3, "RP8", fontsize=8)
            plt.text(-1.0,-1.3, "RP9", fontsize=8)
            plt.text(0.0, -1.3, "RP10", fontsize=8)
            plt.text(1.0, -1.3, "RP11", fontsize=8)

            ax.set_ylim([-2,2])
            ax.set_xlim([-2,2])

            htmlGraph = mpld3.fig_to_html(fig)

            plt.close('all')
            return htmlGraph

The output when the point is hovered to specific point is as below: enter image description here

So in above plot when the yellow "+" is hovered then it displays the hovered text in single line.But my desired output is:
UE:280
pr_rp_id:4

This is the part where I am adding the hover text with new line:

ueLabel = "UE:"+ue +"\n" +" pr_rp_id:"+ ue_info[ue]["pr_rp_id"]

Please help me.

Solution

  • You can produce new lines using PointHTMLTooltip instead of PointLabelTooltip:

    import matplotlib.pyplot as plt
from mpld3 import fig_to_html, plugins, display
fig, ax = plt.subplots()
points = ax.plot(range(10), 'o')

texts = ['<p><h5>{title1}</h3><p><h5>#{title2}</h3>'.format(
         title1='hello', title2=i) for i in range(10
        )]

text = plugins.PointHTMLTooltip(points[0], texts)
plugins.connect(fig, text)

fig_to_html(fig)
display()

    enter image description here