Plotly Figure: Add grid

Question

I have a dataframe that looks like this:

I want to create a Coordinates Plot:

fig = go.Figure(layout=dict(title="Pokemon Stats by Type"),
            
            data=
    go.Parcoords(
        line = dict(color = newdf['Type_enc'],
                    colorscale = [(0.0, "red"), (0.5, "red"), (0.5, "rgba(0, 0, 255, 0.7)"), (1.0, "rgba(0, 0, 255, 0.7)")],
                    showscale = True,
                    colorbar=dict(title="Type",tickvals=[0,1],ticktext=["Fire","Water"])),

        dimensions = list([
            dict(range = [0,cap],
                 label = 'Attack', values = newdf["Attack"]),

            dict(range = [0,cap],
                 tickvals = [0,180],
                 ticktext = ['0', '180'],
                 label = 'Defense', values = newdf["Defense"]),

            dict(range = [0,cap],
                 tickvals = [0,180],
                 ticktext = ['0', '180'],
                 label = 'HP', values = newdf["HP"]),

            dict(range = [0,cap],
                 tickvals = [0,180],
                 ticktext = ['0', '180'],
                 label = 'Sp.Attack', values = newdf["Sp.Attack"]),

            dict(range = [0,cap],
                 tickvals = [0,180],
                 ticktext = ['0', '180'],
                 label = 'Sp.Defense', values = newdf["Sp.Defense"]),

            dict(range = [0,cap],
                 tickvals = [0,180],
                 ticktext = ['0', '180'],
                 label = 'Speed', values = newdf["Speed"])
        ]),
)

)

This is the output:

I´m trying to add a grid to the figure but this code does not seem to work:

fig.update_xaxes(
gridcolor="black",
dtick=25,showgrid=True)

fig.update_yaxes(
gridcolor="black",
dtick=25,showgrid=True)

The desired grid output should look like this (in 25 steps)

Can anyone help me adding that grid? Thank you in advance!

Answer 1

I don't think the grid functionality is implemented in plotly's parallel coordinate graph. So I made a pseudo-grid by adding horizontal lines. Since the presentation of the data cannot be reused in the image, I drew the lines in two units from 0 to 8 based on the example in the reference. This specified value should be modified to fit your data; it is slightly off to the y-axis scale, but you can decide if this error is acceptable.

import plotly.graph_objects as go
import numpy as np
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/bcdunbar/datasets/master/iris.csv")

fig = go.Figure()

for i in np.arange(0, 9, 2.0):
    fig.add_hline(y=i, line_color='#2a3f5f', line_width=0.5)
    
fig.add_trace(go.Parcoords(
        line = dict(color = df['species_id'],
                   colorscale = [[0,'purple'],[0.5,'lightseagreen'],[1,'gold']]),
        dimensions = list([
            dict(range = [0,8],
                constraintrange = [4,8],
                label = 'Sepal Length', values = df['sepal_length']),
            dict(range = [0,8],
                label = 'Sepal Width', values = df['sepal_width']),
            dict(range = [0,8],
                label = 'Petal Length', values = df['petal_length']),
            dict(range = [0,8],
                label = 'Petal Width', values = df['petal_width'])
        ])
    )
)

fig.update_xaxes(showticklabels=False)
fig.update_yaxes(showticklabels=False)
fig.update_layout(plot_bgcolor = 'white', paper_bgcolor = 'white')

fig.show()