Cant get correct Heatmap xaxis range

I cant make go.Heatmap to remove spaces between dates my xlabels are [1, 2, 3, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30] because I can get only the last 14 days of data. Heatmap automatically creates xticks range(1:31) and this makes empty xticks resulted as image below

import plotly.figure_factory as ff
import plotly.graph_objects as go

# Get globals
START_DATE = pd.to_datetime(data['Start Date'], dayfirst=True).min().date()
END_DATE = pd.to_datetime(data['Start Date'], dayfirst=True).max().date()

data['hour'] = data.index.hour
def create_heatmap_data(column):
    return data.groupby(['hour', data.index.day])[column].mean().unstack()

z_impressions = create_heatmap_data('Impressions')
z_clicks = create_heatmap_data('Clicks')
z_cost = create_heatmap_data('7 Day Total Orders (#)')

# x and y axis labels
x_labels = data.index.day.unique().dropna().sort_values().values.astype(str)
y_labels = data.index.hour.unique().dropna().sort_values().values.astype(str)

annotations=[]

def generate_annotations(z_data):
    annotations = []
    for n, row in enumerate(y_labels):
        for m, val in enumerate(x_labels):
            # get value from the z_data (heatmap values)
            value = z_data.iloc[n, m]
            
            record = go.layout.Annotation(
                text=str(np.round(value,2)),
                x=val,  # use actual day value from x_labels
                y=row,  # use actual hour value from y_labels
                xref="x",
                yref="y",
                font=dict(color='white'),
                showarrow=False
            ) 
            annotations.append(record)
    return annotations


# Create buttons for updating heatmap and annotations
buttons = [
    dict(label="Impressions",
         method="update",
         args=[{"z": [z_impressions.values], "annotations": generate_annotations(z_impressions)}]),
    dict(label="Clicks",
         method="update",
         args=[{"z": [z_clicks.values], "annotations": generate_annotations(z_clicks)}]),
    dict(label="Cost",
         method="update",
         args=[{"z": [z_cost.values], "annotations": generate_annotations(z_cost)}])
]

fig = go.Figure(go.Heatmap(z=z_impressions.values,
                           x=x_labels,
                           y=y_labels,
                           colorscale="thermal",
                           showscale=True))

# Apply the annotations for "Impressions"
fig.update_layout(
    annotations=generate_annotations(z_impressions),
    updatemenus=[{
        "buttons": buttons,
        "direction": "down",
        "showactive": True,
        "x": 1.25,
        "y": 1.2
    }]
)

fig.update_yaxes(title_text="Hours", tickvals=np.arange(len(y_labels)), ticktext=y_labels)
fig.update_xaxes(title_text="Days",  nticks=len(x_labels),tickvals=np.arange(len(x_labels)), ticktext=x_labels)
fig.show()

Hey @alp, welcome to the forums.

Not sure if I understand what you are after, but are your referring to something like this?

import plotly.graph_objects as go
from plotly.subplots import make_subplots
import numpy as np

data = np.random.randint(0, 255, size=(31, 31))

fig = go.Figure(
    go.Heatmap(z=data)
)

fig.update_xaxes(range=[1, 31], tickmode='array', tickvals=[i for i in range(1, 32) if i>17])
fig.show()


mrep tickmode

Hello @AIMPED both yes and no I am trying to build an automatic heatmap visualization for my company. Since I can get last 14 days of data I dont know which date users are gonna pull data and what will be the xaxis values but it should be limited to 14 days. So I need only 14 bars in xticks. Nevertheless, when I get rid off annotations my graph is fixed. I am closing the issue but it would be nice to get the same result with annotations. Without annotations my final graph looked like this. Thanks for your answer and time.
Also if you can see in the image I upload below first and second xtcik collided I don’t know why or how to fix it.