title: making matplotlib stacked bar chart interactive in jupyter using plotly
body: <p>First time using jupyter &amp; plotly, so I'm really struggling</p>
  
  <p>This is my code</p>
  
  <pre><code># import packages
  import pandas as pd
  import matplotlib.pyplot as plt
  import matplotlib.gridspec as gridspec
  import numpy as np
  import seaborn as sns
  import plotly.plotly as py
  import plotly.tools as tls
  
  from plotly.graph_objs import *
  py.sign_in("x", "y")
  
  tls.set_credentials_file(username='x', api_key='y')
  tls.get_credentials_file()
  
  fig1 = plt.figure()
  
  %matplotlib notebook
  
  # load data
  revels_data = pd.read_csv("directory.data.txt")
  rd = revels_data
  
  # grouped bar plot
  grouped = rd.groupby(["Packet number", "Flavour"])["Contents"].sum().unstack().fillna(0)
  grouped.plot(kind="bar", stacked=True, color=["#a2653e", "#a6814c", "#fd5956", "#fd8d49", "#9c6da5", "#c9ae74"])
  
  # title and axis labels
  plt.title("NUMBER OF REVELS PER PACKET", weight="bold")
  plt.ylabel("Contents")
  plt.xlabel("Packet")
  
  # plot median line
  median = 19
  plt.axhline(median, color='grey', linestyle='dashed', linewidth=0.5)
  
  # legend properties
  plt.legend(loc=2, prop={"size":7})
  
  # extend y axis to fit legend in
  axes = plt.gca()
  axes.set_ylim([0,30])
  
  # show plot
  plt.show()
  </code></pre>
  
  <p>which produces the plot:</p>
  
  <p><a href="https://i.stack.imgur.com/jjhOm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jjhOm.png" alt="enter image description here"></a></p>
  
  <p>This displays in jupyter fine.</p>
  
  <p>Now, what I want to do it add hover functionality essentially exactly like this example:</p>
  
  <p><a href="https://plot.ly/matplotlib/bar-charts/#stacked-bar-chart-with-labels" rel="nofollow noreferrer">https://plot.ly/matplotlib/bar-charts/#stacked-bar-chart-with-labels</a></p>
  
  <p>where hovering the mouse over each bar shows the flavour distribution per pack.</p>
  
  <p>i.e: individual tabs for:
  total: a,
  orange: b,
  toffee: c,
  etc.
  appear when hovering over each packet's bar in their respective flavour's colour.</p>
  
  <p>I have had a fiddle for about 3 hours but I am getting no where.</p>
  
  <p>Please help, thanks!</p>
  
  <p>EDIT:</p>
  
  <pre><code># import packages
  import pandas as pd
  import matplotlib.pyplot as plt
  import matplotlib.gridspec as gridspec
  import numpy as np
  import seaborn as sns
  import plotly.plotly as py
  import plotly.tools as tls
  
  from plotly.graph_objs import *
  py.sign_in("x", "y")
  
  tls.set_credentials_file(username='x', api_key='y')
  tls.get_credentials_file()
  
  %matplotlib notebook
  
  # load data
  revels_data = pd.read_csv(".txt")
  rd = revels_data
  
  fig1 = plt.figure()
  ax = mpl_fig.add_subplot
  
  # grouped bar plot
  grouped = rd.groupby(["Packet number", "Flavour"])["Contents"].sum().unstack().fillna(0)
  ax.grouped.plot(kind="bar", stacked=True, color=["#a2653e", "#a6814c", "#fd5956", "#fd8d49", "#9c6da5", "#c9ae74"])
  
  # title and axis labels
  plt.title("NUMBER OF REVELS PER PACKET", weight="bold")
  plt.ylabel("Contents")
  plt.xlabel("Packet")
  
  # plot median line
  median = 19
  plt.axhline(median, color='grey', linestyle='dashed', linewidth=0.5)
  
  # legend properties
  plt.legend(loc=2, prop={"size":7})
  
  # extend y axis to fit legend in
  axes = plt.gca()
  axes.set_ylim([0,30])
  
  # show plot
  plotly_fig = tls.mpl_to_plotly(fig1)
  py.plot()
  </code></pre>
  
  <p>error: AttributeError: 'function' object has no attribute 'grouped'</p>