# Auto reduce xticks size in dash if screen size changes

**URL:** <https://community.plotly.com/t/auto-reduce-xticks-size-in-dash-if-screen-size-changes/83662>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [April 9, 2024, 6:02am UTC](https://community.plotly.com/t/auto-reduce-xticks-size-in-dash-if-screen-size-changes/83662 "2024-04-09T06:02:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zeeshanch2732](https://avatars.discourse-cdn.com/v4/letter/z/13edae/32.png) [@zeeshanch2732](https://community.plotly.com/u/zeeshanch2732)\
**Post date:** [April 9, 2024, 6:02am UTC](https://community.plotly.com/t/auto-reduce-xticks-size-in-dash-if-screen-size-changes/83662/1 "2024-04-09T06:02:34Z")

</div>

I’m working on a dash app project. I have a plot having 56 ticks on the X-axis. and need to show all the ticks. on a large screen, it shows all ticks separated, but when the screen size reduces xticks become congested.

 ![notcon](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/c/dc8e1c4b897fd8f0c0a388b49f0a7bd7e52f877d.png)

it becomes congested when screen size reduces  
 ![conjested](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/e/3e7f8e1e48489770250950f73de9dfcc0a3882d9.png)  
I need help when screen size reduces it reduces the size of ticks. And show separated and clean ticks.

```auto
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
import numpy as np

# Generate x-values from 0 to 56
x_values = list(range(57))

# Sample data for y-values
y_values = [i for i in range(57)] # Sample y-values

# Create DataFrame
df = pd.DataFrame({'x': x_values, 'y': y_values})

# Create Dash app
app = dash.Dash( __name__ )

# Define layout
app.layout = html.Div(children=[
    # html.H1(children='Line Plot Example'),

    dcc.Graph(
        id='line-plot'
    )
])

# Callback to update the plot
@app.callback(
    Output('line-plot', 'figure'),
    [Input('line-plot', 'id')]
)
def update_plot(_):
    # Create trace using go.Scatter
    trace = go.Scatter(x=df['x'], y=df['y'], mode='lines+markers', name='line')

    # Create layout
    layout = go.Layout(
        title='Line Plot',
        xaxis=dict(
            title='X-axis',
            tickvals=np.arange(57),
            ticks="outside", 
            tickangle=0,
            linewidth=1,
            linecolor='black',
            showline=True,
            range=[0, max(df['x'])],
            ),
        yaxis=dict(
            title='Y-axis',
            ticks="outside", 
            tickangle=0,
            linewidth=1,
            linecolor='black',
            showline=True,
            rangemode = "tozero",
            ),
        paper_bgcolor='rgba(0,0,0,0)',
        # plot_bgcolor='rgba(0,0,0,0)',
        margin=dict(l=10, r=10, b=10, t=40)
            )

    # Create figure
    fig = go.Figure(data=[trace], layout=layout)

    return fig

if __name__ == ' __main__':
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [April 9, 2024, 9:58am UTC](https://community.plotly.com/t/auto-reduce-xticks-size-in-dash-if-screen-size-changes/83662/2 "2024-04-09T09:58:10Z")

</div>

Hey @zeeshanch2732 , welcome to the community.

This might be interesting for you. It would be the same approach, just changing the axes instead of the marker size.

> [@Making marker size dynamic when changing browser sizes](https://community.plotly.com/t/making-marker-size-dynamic-when-changing-browser-sizes/82260/2):
>
> Welcome to the forums @stapler. Yes, this is possible. What I’m doing here is adding a eventListener for the window size. If resized, a dummy elements gets clicked and the callbacks for the change of the marker size get triggered. I could have made the last callback clientside too. from dash import Dash, dcc, html, Input, Output, Patch import plotly.graph\_objects as go app = Dash(\_\_name\_\_) app.layout = html.Div( [ dcc.Store(id="dimensions"), html.Div(id='dummy'), …

---

<div class="post-metadata">

**Author:** ![zeeshanch2732](https://avatars.discourse-cdn.com/v4/letter/z/13edae/32.png) [@zeeshanch2732](https://community.plotly.com/u/zeeshanch2732)\
**Post date:** [April 15, 2024, 6:53am UTC](https://community.plotly.com/t/auto-reduce-xticks-size-in-dash-if-screen-size-changes/83662/3 "2024-04-15T06:53:19Z")

</div>

This is very good approch, but in my case i don’t need to trigger callback function of plot. Beacuse it will take same time to change ticks size as it takes to plot the figure.  
Is there any solution on plot side only?

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [April 15, 2024, 8:30pm UTC](https://community.plotly.com/t/auto-reduce-xticks-size-in-dash-if-screen-size-changes/83662/4 "2024-04-15T20:30:02Z")

</div>

I’m not sure I understand the issue, unfortunately