CODEWITHSUNDEEP
pythonplotlyplotly-dash
Derek Langley
Derek Langley

Reputation: 168

Different marker colors for the same line

I am trying to create a simple line graph for a webapp using plotly and dash. I want to a line connecting two points. I want one of the point tobe red and the other to be green. Here's what I have so far:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
graph = dcc.Graph(figure = {
    'data' : [
        go.Scatter(x = [1,4], y = [2,3], mode = 'lines+markers', opacity = 0.7, marker = {
            'size' : 15,
            'line' : {'width' : 0.5, 'color' : 'black'}
        })
    ]
})
app.layout = html.Div([graph])
if __name__ == '__main__':
    app.run_server(debug = False)

I am running this code in a Jupyter notebook with all the latest packages. If I run this code, I get the line plot I want, but both the points are blue. I want the point corresponding to (1, 2) to be red and (4, 3) to be green. How can I go about doing this? Thank you so much in advance!

Upvotes: 3

Views: 2216

Answers (1)

Mason Caiby
Mason Caiby

Reputation: 1924

I believe the accepted solution to this problem is to have 3 different go.scatter() objects in your graph data. One for the line, and one for each marker. Your app would end up looking like this:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
graph = dcc.Graph(figure = {
    'data' : [
        go.Scatter(x = [1,4], y = [2,3], mode = 'lines+markers', opacity = 0.7, 
                   marker={'color':["red","green"], "size":15})
    ]
})
app.layout = html.Div([graph])

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

Upvotes: 5

Related Questions