Datepickerrange Not update graph with multiple lines

Hello all,

I wanna to build a chart that represent the duration of calls over several roads as shown below

I create a Date Picker Range to change the Date axis based on user selection,
when I create a callback for this graph, find the code below

    Output('mo-per-road-paragraph', 'figure'),
    Input('org-voice-per-road-date-picker', 'start_date'),
    Input('org-voice-per-road-date-picker', 'end_date'),
    State('mo-per-road-paragraph', 'figure'),
def update_output(start_date, end_date, mo_per_road_paragraph):
    if not start_date or not end_date:
        raise dash.exceptions.PreventUpdate

        mo_per_road_paragraph = Patch()
        mo_per_road_paragraph['layout']['xaxis']['range'][0, 0] = start_date
        mo_per_road_paragraph['layout']['xaxis']['range'][1, 1] = end_date
        return mo_per_road_paragraph

and this is the code for the chart


                    id='org-voice-per-road-date-picker',  # ID to be used for callback
                    calendar_orientation='horizontal',  # vertical or horizontal
                    day_size=39,  # size of calendar image. Default is 39
                    end_date_placeholder_text="End Date",  # text that appears when no end date chosen
                    with_portal=False,  # if True calendar will open in a full screen overlay portal
                    first_day_of_week=0,  # Display of calendar when open (0 = Sunday)
                    is_RTL=False,  # True or False for direction of calendar
                    clearable=True,  # whether or not the user can clear the dropdown
                    number_of_months_shown=1,  # number of months shown when calendar is open
                    # minimum date allowed on the DatePickerRange component
                    display_format='MMM Do, YY',
                    month_format='MMMM, YYYY',


                          figure=px.line(data_frame=mo_voice_traffic_org, x='Date', y='duration(min)',
                                         color='Road Name',
                                         title='MO Voice Calls - Min/day', markers=True,
                          responsive=True, style={'display': 'inline-block', 'margin-top': '3rem', 'width': '58rem',
                                                  'margin-right': '2rem', 'border': 'solid black'}


So, when I try to put start and end date, there is no change on the graph (first problem)

Second problem
When I try to select on of roads from the legend, it overlap with the next graph

So, can anyone help me to solve this problems

Thanks in advance.

hi @DoaaElbanaa
instead of images of code, can you please provide your app code with us, including your data (MRE). If you can’t share your data, you can also share sample data.

This post will show you how to write MRE.

Thank you.

Thanks Adam for your helpful comments, I edit the post with code

Can you share your sample data too?