Auto reduce xticks size in dash if screen size changes

Dash Python
1

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
notcon1351×468 19.6 KB

it becomes congested when screen size reduces
conjested
I need help when screen size reduces it reduces the size of ticks. And show separated and clean ticks.

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)
2

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.

2 Likes
3

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?

4

I’m not sure I understand the issue, unfortunately