Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Displaying a graph without input

I have a graph that I want to display but I’ve learnt that I need an input to launch it. So I tried to use html.Div(id='test') as the input. But the Dash app tells me that it’s an Invalid “prop” for this component.

Property "value" was used with component ID:
  "test"
in one of the Input items of a callback.
This ID is assigned to a dash_html_components.Div component
in the layout, which does not support this property.
This ID was used in the callback(s) for Output(s):
  graph-similarity.figure

Here is my code:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('some_file.csv')


def layout():
    return html.Div([
        html.Div(id='test'),
        html.Div(id='dd-output-container-similarity'),
        html.Div([
            dcc.Graph(id='graph-similarity')
        ])
    ])

@app.callback(
    Output(component_id='graph-similarity', component_property='figure'),
    [Input(component_id="test", component_property="value")]
)
def update_graph(my_dropdown):
    dfc = df.sort_values(by='similarity', ascending=False)
    traces = []
    for i in range(len(dfc)):
        trace = go.Bar(x=[dfc.iloc[i].values[0]], y=[dfc.iloc[i].values[0]], name=df.iloc[0].name)
        # trace_perceived = go.Bar(x=[dfc.iloc[i].values[0]], y=[-dfc.iloc[i].values[1]], name='Perceived')
        traces.append(trace)
        # traces.append(trace_perceived)
    figure={
        'data': traces,
        'layout':
            go.Layout(title='Score de similarité des descriptions avec leurs commentaires', barmode='stack')
    }

    return figure

app.layout = layout()

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

Yet I’m able to show something:

Hi MikeP1,

The problem is that html.Div has no “value” property, you should use “children” or any other: