title: How to keep only time on plotly graph axis
body: <p>I'm trying to create a graph with plotly and cufflinks that has dates on the xaxis, some amounts on the primary y, and time on the secondary y.</p>
  
  <p>The data looks like this:</p>
  
  <pre><code>        automatic   manual  time
  2019-02-25  206.0   1206.0  2019-02-26 16:58:09
  2019-02-26  225.0   136.0   2019-02-27 08:33:49
  2019-02-27  213.0   554.0   2019-02-28 07:25:19
  2019-02-28  244.0   103.0   2019-03-01 07:32:37
  2019-03-01  102.0   119.0   2019-03-04 12:06:37
  </code></pre>
  
  <p>The setup for the figure is as follows:</p>
  
  <pre class="lang-py prettyprint-override"><code>fig = go.Figure(**cf.tools.merge_figures([
      df.figure(columns=["automatic", "manual"], kind="bar", barmode="stack"),
      df.figure(columns=["time"])
  ])).set_axis(["time"], side="right")
  </code></pre>
  
  <p>The only way I've gotten the graph I want is by setting the date part of each date in the <code>df.time</code> column to the same arbitrary date, like so:</p>
  
  <pre class="lang-py prettyprint-override"><code>df.loc[:, "time"] = df.time.apply(lambda d: d.replace(year=1967, month=1, day=1))
  </code></pre>
  
  <p>However, this way I get the wrong hover text and that arbitrary date is displayed at the bottom of the secondary y.</p>
  
  <p>I've tried to set the range on <code>yaxis2</code> manually like so:</p>
  
  <pre class="lang-py prettyprint-override"><code>sotimes = [d for d in df.time.tolist() if not pd.isnull(d)]
  fig["layout"].update({"yaxis2": {"range": [f"{min(sotimes):%H:%M:%S}", f"{max(sotimes):%H:%M:%S}"]}})
  </code></pre>
  
  <p>Strangely, this results in <code>yaxis2</code> being a date range as well.</p>
  
  <p>I've also tried to convert <code>df.time</code> to time only, either as a string or as datetime.time like so:</p>
  
  <pre class="lang-py prettyprint-override"><code>df.loc[:, "time"] = df.time.apply(
      lambda d: d.time() if not pd.isnull(d) else pd.NaT)
  df.loc[:, "time"] = df.time.apply(
      lambda d: f"{d:%H:%M:%S}" if not pd.isnull(d) else "")
  </code></pre>
  
  <p>Both of these result in <code>yaxis2</code> not being ordered at all, the times are displayed in the order in which they appear in <code>df.time</code>.</p>
  
  <hr>
  
  <p><strong>EDIT 1</strong> - add complete code</p>
  
  <pre class="lang-py prettyprint-override"><code>import cufflinks as cf
  import plotly.graph_objs as go
  from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
  import pandas as pd
  
  
  # plotly stuff
  cf.go_offline()
  
  dct = {
      "date": ["2019-02-25", "2019-02-26", "2019-02-27", "2019-02-28", "2019-03-01"],
      "auto": [206, 225, 213, 244, 102],
      "manual": [1206, 136, 554, 103, 119],
      'time': [pd.Timestamp(2019, 2, 26, 16, 58, 9), pd.Timestamp(2019, 2, 27, 8, 33, 49),
               pd.Timestamp(2019, 2, 28, 7, 25, 19), pd.Timestamp(2019, 3, 1, 7, 32, 37),
               pd.Timestamp(2019, 3, 4, 12, 6, 37)]
  }
  df = pd.DataFrame(dct).set_index("date")
  df.loc[:, "time"] = df.time.apply(lambda d: d.replace(year=1967, month=1, day=1))
  
  fig = go.Figure(**cf.tools.merge_figures([
      df.figure(columns=["auto", "manual"], kind="bar", barmode="stack"),
      df.figure(columns=["time"])
  ])).set_axis(["time"], side="right")
  # sotimes = [d for d in df.time.tolist() if not pd.isnull(d)]
  # fig["layout"].update({"yaxis2": {"range": [f"{min(sotimes):%H:%M:%S}", f"{max(sotimes):%H:%M:%S}"]}})
  plot(fig)
  </code></pre>