Hover labels in Plotly

lee · September 3, 2019, 5:03pm

Hey guys,

Been stuck on something for days, and I’m hoping someone can help me out.

I have a chart with dates for the x axis and six figure dollar amounts for the y axis. For some reason, my chart’s hover format is defaulting to showing only the y axis, and in exponential notation. Adding the hovertemplate does no good, setting hoverformat for my x and y axis does no good. If I change hover info to ‘text’, it’ll show text, but setting it to ‘x’ or ‘y’ or ‘x+y’ just shows the y value in exponential notation.

I have tested the plotly plot in a Jupyter notebook (because re-running the app to update the chart and see if it changed takes a while) and it comes out fine there.

Here are my settings for the plot:

  plot.data = [
go.Scatter(
  x = data['x'],
  y = data['y'],
  fill='tozeroy',
  name = 'MRR',
  hoverinfo = 'y',
  line= {
  'shape' : 'spline',
  'smoothing':1.0
  }
)
  ]
  plot.layout = {
'title' : title,
'yaxis' : {
  'visible' : False,
  'hoverformat' : '$,.2f'
},
'xaxis' : {
  'visible' : False
},
'margin' : {
  'l' : 0,
  't' : 80,
  'b' : 0,
  'r' : 0
}
  }

Please excuse the formatting issues of the above code. It didn’t copy/paste very well.

Note that when I change the margins and make the x and y axis visible, the hover info is properly formatted as requested.

Any ideas why this is defaulting to exponential notation and how I can set the hover format?

aldo.ercolani · September 4, 2019, 3:50pm

Hi Lee
I couldn’t find the reason why your code doesn’t work, but you can work you way around the problem by setting the hoverinfo to “text” and building yourself the hover texts.
I have modified your code this way and it works:

    data = {}
    data['x'] = [1, 2, 3, 4, 5]
    data['y'] = [10, 20, 15, 16, 29]
    hovertexts = []
    for indx in range(len(data['x'])):
      hovertexts.append('({x},{y})'.format(x=data['x'][indx], y=data['y'][indx]))
    print data
    print hovertexts
    plot_data = [
        go.Scatter(
            x = data['x'],
            y = data['y'],
            fill='tozeroy',
            name = 'MRR',
            hoverinfo = 'text',
            hovertext = hovertexts,
            line= {
                'shape' : 'spline',
                'smoothing':1.0
            }
        )
   ]
    print plot_data
    plot_layout = {
        'title' : 'My Plot',
        'yaxis' : {
            'visible' : False,
            'hoverformat' : '$,.2f'
        },
        'xaxis' : {
            'visible' : False
        },
        'margin' : {
            'l' : 0,
            't' : 80,
            'b' : 0,
            'r' : 0
        }
   }
    print plot_layout
    self.plot_1.data = plot_data
    self.plot_1.layout = plot_layout

Here’s the copyapp if you want to see it in action.
https://anvil.works/build#clone:Q7HXQV2HSKQXAV3D=BTCXAAKIVEU6I4WD5B2KM46P

Hope this helps.

Bye

shaun · September 18, 2019, 3:17pm

I’ve just had a look at this - if you don’t make the y-axis visible: False, then your hover text comes out correctly.

    self.plot_1.layout = {
      'title' : title,
      'yaxis' : {
#         'visible' : False,
        'hoverformat' : '$,.2f'
      },
      'xaxis' : {
        'visible' : False
      },
      'margin' : {
        'l' : 0,
        't' : 80,
        'b' : 0,
        'r' : 0
      }
    }

Since the left margin is 0, the y-axis is still not actually displayed.