Home > Enterprise >  Adding different colors for markers in plotly
Adding different colors for markers in plotly

Time:11-27

I have a graph that looks like this:

enter image description here

I want to sort the color combinations for the dots on this, to achieve something like one color for all the versions that start with 17, different one for 18 and lastly the 20. I don't know if I can do this in plotly since it is very specific and found no information on this. Is it possible to also add different colors for the sub versions, like for 17 we have different categories like 17.2.3, 17.2.2 and so on.

here is my data:

            Days Difference                commitDate   Year-Month
18538         1291           2021-01-25 11:15:48         2020-01
18539         1135             2020-11-30 05:11:41       2020-11
18540         1100            2020-08-17 07:22:54        2020-08
18541         900              2020-08-17 07:12:05       2020-01
18542         340              2020-01-09 06:21:03       2020-01
18543         203              2019-11-20 06:03:28       2019-11
18544         120             2019-11-15 02:50:28        2019-11

This is the code I have written so far:

data1= final_api.query("info_title=='Avi CertificateManagementProfile Object API'")
data1['commitDate'] = pd.to_datetime(final_api['commitDate']) 
import plotly.graph_objects as go
fig = go.Figure()

fig.add_trace(go.Scatter(mode='lines',
                         x=data1["commitDate"],
                         y=data1["Days_difference"],
                         line_color='black',
                         line_width=1,
                         line_shape='vh',
                         showlegend=False
                       )
             )

fig.add_trace(go.Scatter(mode='markers',
                         x=data1["commitDate"],
                         y=data1["Days_difference"],
                         marker=dict(color=data1['day'], colorscale='plasma', size=10),
                         showlegend=False
                        )
             )

for _,row in data1.iterrows():
    fig.add_annotation(
        go.layout.Annotation(
            x=row["commitDate"],
            y=row["Days_difference"],
            text=row['info_version'],
            showarrow=False,
            align='center',
            yanchor='bottom',
            yshift=10,
            textangle=-90)
    )
fig.update_layout(template='plotly_white',title_text=' Version Change in Avi CertificateManagementProfile Object API over its Age',title_x=0.5,
                  xaxis_title='Year-Month', yaxis_title='Age of the API (in days)', xaxis_tickformat = '%d %B (%a)<br>%Y', height=700, width=1300)
fig.update_xaxes(showline=True, linewidth=1, linecolor='black', mirror=True)
fig.update_yaxes(showline=True, linewidth=1, linecolor='black', mirror=True)

fig.show()

Any help or guidance will be appreciated.

CodePudding user response:

Currently you are assigning marker color based on the 'day' column in your argument marker=dict(color=data1['day'], colorscale='plasma', size=10), but it sounds like you want to assign the color based on the major version.

You can extract the major version from the info_version column, and store it in a new column called "major_version":

data1['major_version'] = data1['info_version'].str.split('.').str.get(0)

Then I would suggest using px.scatter which makes it easier to pass a categorical column as a color (see the documentation here).

Then you would restructure your code to plot the markers first, and then the lines connecting the markers:

import plotly.express as px

fig = px.scatter(data1, x='commitDate', y='Days_difference', color='major_version')

fig.add_trace(go.Scatter(mode='lines',
                         x=data1["commitDate"],
                         y=data1["Days_difference"],
                         line_color='black',
                         line_width=1,
                         line_shape='vh',
                         showlegend=False
                       )
             )

fig.update_layout(showlegend=False)

And keep the rest of your code the same.

  • Related