title: Plotly: How to customize xaxis tick labels using plotly express?
body: <p>I'm trying to display a horizontal bar chart with dates on the x-axis, but can't seem a way to do that although the x-values are dates of type string. As you can see below, the numbers that occur as ticklabels have to be a summation of some sort, but I'm not sure exactly what. How can you change the example below to get dates as ticklabels?</p>
  
  <p><strong>Plot 1:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/h0mxM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h0mxM.png" alt="enter image description here"></a></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code># imports
  import numpy as np
  import pandas as pd
  import plotly.express as px
  from datetime import datetime
  
  # data
  np.random.seed(1)
  cols=list('ABCDE')
  df = pd.DataFrame(np.random.randint(0,2,size=(5, len(cols))), columns=cols)
  drng=pd.date_range(datetime(2020, 1, 1).strftime('%Y-%m-%d'), periods=df.shape[0]).tolist()
  df['date']=[d.strftime('%Y-%m-%d') for d in drng]
  dfm=pd.melt(df, id_vars=['date'], value_vars=df.columns[:-1])
  
  # plotly express
  fig = px.bar(dfm, x="date", y="variable", color='value', orientation='h',
               hover_data=["date"],
               height=400,
               color_continuous_scale=['blue', 'teal'],
               title='Custom date ticklabels for vertical bar plot',
               template='plotly_white',
              )
  
  fig.update_traces(showlegend=False)
  fig.update(layout_coloraxis_showscale=False)
  fig.show()
  </code></pre>
  
  <p><strong>What I've tried:</strong></p>
  
  <p>I've tried different combinations for <code>tickmode</code>, <code>tickvals</code> and <code>ticktext</code> for <code>xaxis=dict()</code> in <code>fig.update_layout</code>, alas with completely useless results.</p>
  
  <p><strong>Attempt 2:</strong> <code>ticktext</code></p>
  
  <p>Set <code>tickvals=df['date']</code></p>
  
  <pre><code>fig.update_layout(yaxis=dict(title=''),
                    xaxis=dict(title='',
                    gridcolor='grey',
                    #tickmode= 'array',
                    #tickmode= 'linear',
                    #tick0= 2220,
                    #dtick=200,
                    #tickvals= [2020, 2040],
                    ticktext = df['date'])
                   )
  </code></pre>
  
  <p><strong>Plot 2:</strong> </p>
  
  <p>Same as before:</p>
  
  <p><a href="https://i.stack.imgur.com/fDqnK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fDqnK.png" alt="enter image description here"></a></p>
  
  <p><strong>Attempt 3:</strong> <code>ticktext</code> &amp; <code>dtick</code></p>
  
  <p>To my amazement, setting <code>dtick</code> to some arbitrary value gives you the plot below.</p>
  
  <pre><code>fig.update_layout(yaxis=dict(title=''),
                    xaxis=dict(title='',
                    gridcolor='grey',
                    #tickmode= 'array',
                    #tickmode= 'linear',
                    tick0= 2050,
                    dtick=2,
                    #tickvals= [2020, 2040],
                    ticktext = df['date'])
                   )
  </code></pre>
  
  <p><strong>Plot 3:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/9N7EP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9N7EP.png" alt="enter image description here"></a></p>
  
  <p>Still amazingly useless, but now the ticks at least looks like dates, although we're looking at a value that represents a timestamp in <code>2008</code> and the source data is <code>2020</code>...</p>
  
  <p><strong>Attempt 4:</strong> <code>tickvals</code> and <code>ticktext</code></p>
  
  <pre><code>fig.update_layout(yaxis=dict(title=''),
                    xaxis=dict(title='',
                    gridcolor='grey',
                    #tickmode= 'array',
                    #tickmode= 'linear',
                    tick0= 2050,
                    #dtick=2,
                    tickvals= [2050, 2100, 2150, 2200],
                    ticktext = df['date'])
                   )
  </code></pre>
  
  <p><strong>Plot 4:</strong></p>
  
  <p>From the looks of if, this is <strong><em>exactly</em></strong> what I'm looking for:</p>
  
  <p><a href="https://i.stack.imgur.com/kSIU4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kSIU4.png" alt="enter image description here"></a></p>
  
  <p>But this is equally useless like the other attempts, since we <strong><em>have</em></strong> to specify <code>tickvals= [2050, 2100, 2150, 2200]</code>. If we change the period, these values will have to be re-specified, and that's not very flexible. Of course, if we somehow could retrieve the default tickvalues used by plotly, we could easily replace them with the dates in the dataset. But that seems to still be impossible according to the answer to the post <a href="https://stackoverflow.com/questions/55118898/plotly-how-to-retrieve-values-for-major-ticks-and-gridlines">Plotly: How to retrieve values for major ticks and gridlines?</a></p>
  
  <p>I'm at a complete loss here, and baffled by the uselessness of my attempts, so any other suggestions would be great!</p>