How add EMPTY graph dynamically in my app dash

Dash Python
1

I succeed in adding dynamically container/bloc in my dash app when clicking on a button. Each bloc contains one graph and two dropdown (one for X axis and the other for Y axis)

Each time I update a dropdown input (X or Y) the graph axis are updated and datas are correctly plotted

It works, but…

Before I choose dropdown value, some values are inially plotted on the graph zone. And I don’t want this. I would like an empty graph:

Capture
Capture471×576 14.8 KB

Here is my app code:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd


app = dash.Dash(name="OUATT")
                
DATA = pd.read_csv('C:/Users/joris/Desktop/donnees.txt', sep=';')
print(DATA)

#graphe_test= px.scatter(DATA,x=DATA.x,y=DATA.y)               


def create_figure(column_x, column_y):
    return px.scatter(DATA,x=column_x,y=column_y)
    
app.layout = html.Div([
                       html.Button(" + Graphe", id="ajout-graphe", n_clicks=0),
                       html.Div(),
                       html.Div(id='bloc_graphe', children=[]) 
                     ])

@app.callback( Output('bloc_graphe', 'children'),
               [Input('ajout-graphe', 'n_clicks')],
               [State('bloc_graphe', 'children')])

def ajouter_graphe(n_clicks, children):
    
    nouvelle_zone_graphe = html.Div(
        style={'width': '23%', 'display': 'inline-block', 'outline': 'thin lightgrey solid', 'padding': 10},
        children=[
                  dcc.Graph(
                            id ={'type': 'Graphique',
                                 'index': n_clicks}
                            ),
                  
                  dcc.Dropdown(
                               id={
                                   'type':'Selection_variable_X',
                                   'index': n_clicks
                                   },
                               options=[{'label':i, 'value':i} for i in DATA.columns],
                               value = None
                              ),
                  
                  dcc.Dropdown(
                               id={
                                   'type':'Selection_variable_Y',
                                   'index': n_clicks
                                   },
                               options=[{'label':i, 'value':i} for i in DATA.columns],
                               value = None
                              ), 
                 ])
    children.append(nouvelle_zone_graphe)
    return children
 
@app.callback( Output({'type':'Graphique', 'index':MATCH},'figure'),
               [Input({'type':'Selection_variable_X', 'index':MATCH}, 'value'),
                Input({'type':'Selection_variable_Y', 'index':MATCH}, 'value')]
               
            )
def display_output(column_x,column_y):
            return create_figure(column_x, column_y)
  


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

My datas are basic and located in a text file: Capture_data|436x347

I use Pattern-Matching callbacks. I’m sure I miss something in this part of my code:

@app.callback( Output({'type':'Graphique', 'index':MATCH},'figure'),
               [Input({'type':'Selection_variable_X', 'index':MATCH}, 'value'),
                Input({'type':'Selection_variable_Y', 'index':MATCH}, 'value')]
               
            )
def display_output(column_x,column_y):
            return create_figure(column_x, column_y)`

If somehow can explain to me why my graph is not empty when creating a new graph ?
Thank you in advance

Joe