Markers in a line plot with Plotly Dash

📊 Plotly Python
1

My app layout includes this element

chart = (dash.dcc.Graph(id="chart", style={"width": "100%", "height": "500px"},),)

as well as this callback function

@dash.callback(
    Output("chart", "figure"),
    Input("table", "data"),
    prevent_initial_call=True,
)
def update_chart(table):
    df = pd.DataFrame(table)

    data = [{"x": df.iloc[:,0], "y": df.iloc[:,1], "line":{"color":"red",}}]

    layout = go.Layout(
        title=go.layout.Title(
            text="test",
            xref="paper",
            xanchor="center",
        ),
        showlegend=False,
    )

    return {"data": data, "layout": layout}

I want to play with the chart format. Where can I find the documentation that explains all the available options? Does anyone know how to add visible markers? My data is a monthly timeseries and at the moment my chart shows a solid line with no markers. I have found this link here which mentions markers but that’s in the context of plotly express and I’m just using plotly in a dash context.

2

Hi @chon ,

you can refer to plotly graph_object.

https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html

if you want to add markers on line chart, try to add mode='lines+markers' into data` variable

data = [{"x": df.iloc[:,0], "y": df.iloc[:,1], "line":{"color":"red",},"mode":'lines+markers' }]
1 Like
3

@farispriadi thank you for your quick and helpful response. There was a small typo in your solution, it should be

"mode":"lines+markers"
1 Like
4

Thanks. I have updated the typo. :+1:

5

@farispriadi No problem. I have a related question… I am now trying to change the style of the text of the chart axes labels. I’ve tried this:

data = [
        {
            "x": df.iloc[:,0],
            "y": df.iloc[:,1],
            "line": {"color": "red"},
            "mode": "lines+markers",
            "textfont":{"color":"green","size":1},  # this line here doesn't do what I need
        }
    ]

but it doesn’t do anything. No error but the font remains unchanged. Do you have any suggestions please?

6

If you mean change the tick style, do this inside the layout instead of in the data attribute.

layout = go.Layout(
        title=go.layout.Title(
            text="test",
            xref="paper",
            xanchor="center",
        ),
        showlegend=False,
        xaxis=dict(tickfont = dict( color="green", size=1)), # change color to green, size to 1
    )
1 Like
7

@farispriadi thanks for your response. It works.

1 Like