Adding Horizontal Line to Dash-Plotly Python Dashboard

Question

I am creating a Dash app in Python3. Trying to add in a horizontal line to a bar graph. The examples in the documentation are for line graphs, which have numeric x and y axis, whereas I have a categorical X-axis. The below code creates the graph successfully, but does not show the shape object. How can I add a horizontal line to this graph?

        html.Div(
                    [    dcc.Graph(
                            id='example-graph-23',
                            figure={
                                'data': [
                                    {'x': ['Overall', 'NBA', 'WWC', 'NFL'], 'y': [3,2,2.5],
                                     'type': 'bar', 'name': 'Instagram'},
                                          ],
                                'layout': {
                                    'yaxis' : dict(
                                            range=[0, 4]
                                            ),
                                    'plot_bgcolor': colors['background'],
                                    'paper_bgcolor': colors['background'],
                                    'font': {
                                        'color': colors['text']
                                    },
                                    'shapes' : dict(type="line",
                                                    x0=0,
                                                    y0=2,
                                                    x1=5,
                                                    y1=2,
                                                    line=dict(
                                                        color="Red",
                                                        width=4,
                                                        dash="dashdot",
                                                ))
                                }
                            }
                        ) ]
        , className="four columns"
                ),

Dekrion Dekrion · Accepted Answer · 2019-11-22T01:00:50

You can add a vertical line by adding x and y coordinates to the figure.data like this:

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

colors = {'background': 'white', 'text': 'black'}
app.layout = html.Div(
                    [    dcc.Graph(
                            id='example-graph-23',
                            figure={
                                'data': [
                                    {'x': ['Overall', 'NBA', 'WWC', 'NFL'], 'y': [3,2,2.5],
                                     'type': 'bar', 'name': 'Instagram'},
                                    {'x': ['Overall', 'Overall'], 'y': [0, 4],
                                     'type': 'line', 'name': 'v_line_1'}, 
                                    {'x': ['NBA', 'NBA'], 'y': [0, 4],
                                     'type': 'line', 'name': 'v_line_2'}, 
                                    {'x': ['WWC', 'WWC'], 'y': [0, 4],
                                     'type': 'line', 'name': 'v_line_3'},                                    
                                          ],
                                'layout': {
                                    'yaxis' : dict(
                                            range=[0, 4]
                                            ),
                                    'plot_bgcolor': colors['background'],
                                    'paper_bgcolor': colors['background'],
                                    'font': {
                                        'color': colors['text']
                                    },
                                    'shapes' : dict(type="line",
                                                    x0=0,
                                                    y0=2,
                                                    x1=5,
                                                    y1=2,
                                                    line=dict(
                                                        color="Red",
                                                        width=4,
                                                        dash="dashdot",
                                                ))
                                }
                            }
                        )], className="four columns"
)


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

enter image description here

Adding Horizontal Line to Dash-Plotly Python Dashboard

1 Answers