Plotly subplot represent same y-axis name with same color and single legend

📊 Plotly Python
1

I am trying to create a plot for two categories in a subplot. 1st column represent category FF and 2nd column represent category RF in the subplot.

The x-axis is always time and y-axis is remaining columns. In other words, it is a plot with one column vs rest.

1st category and 2nd category always have same column names just only the values differs.

I tried to generate the plot in a for loop but the problem is plotly treats each column name as distinct and thereby it represents the lines in different color for y-axis with same name. As a consequence, in legend also an entry is created.

For example, in first row Time vs price2010 I want both subplot FF and RF to be represented in same color (say blue) and a single entry in legend.

I tried adding legendgroup in go.Scatter but it doesn’t help.

2

@itmsec From your description i understand that you are creating a subplot of one row and two columns. Then do you refer to pandas.DataFrame columns? Please give more details or paste here your formatted code, to figure out what you should change to get a figure that meets your requirements.

3

Yes you are right. You can find the complete code below

import pandas as pd
from pandas import DataFrame
from plotly import tools
from plotly.offline import init_notebook_mode, plot, iplot
import plotly.graph_objs as go
from plotly.subplots import make_subplots

CarA = {'Time': [10,20,30,40 ],
        'Price2010': [22000,26000,27000,35000],
        'Price2011': [23000,27000,28000,36000],
        'Price2012': [24000,28000,29000,37000],
        'Price2013': [25000,29000,30000,38000],
        'Price2014': [26000,30000,31000,39000],
        'Price2015': [27000,31000,32000,40000],
        'Price2016': [28000,32000,33000,41000]
        }

ff = DataFrame(CarA)

CarB = {'Time': [8,18,28,38 ],
        'Price2010': [19000,20000,21000,22000],
        'Price2011': [20000,21000,22000,23000],
        'Price2012': [21000,22000,23000,24000],
        'Price2013': [22000,23000,24000,25000],
        'Price2014': [23000,24000,25000,26000],
        'Price2015': [24000,25000,26000,27000],
        'Price2016': [25000,26000,27000,28000]
        }

rf = DataFrame(CarB)

Type = {
'FF' : ff,
'RF' : rf
}

fig = make_subplots(rows=len(ff.columns), cols=len(Type), subplot_titles=('FF','RF'),vertical_spacing=0.3/len(ff.columns))

labels = ff.columns[1:]
for indexC, (cat, values) in enumerate(Type.items()):
    for indexP, params in enumerate(values.columns[1:]):
        trace = go.Scatter(x=values.iloc[:,0], y=values[params], mode='lines', name=params,legendgroup=params)
        fig.append_trace(trace,indexP+1, indexC+1)
        fig.update_xaxes(title_text=values.columns[0],row=indexP+1, col=indexC+1)
        fig.update_yaxes(title_text=params,row=indexP+1, col=indexC+1)
        fig.update_layout(height=2024, width=1024,title_text="Car Analysis")
iplot(fig)
4

@itmsec In the trace definition you have to define line=dict(color = colorCode) in order to assign the same colors to lines representing car price in the same year.

After your Type definition, I inserted a few lines to your code, as follows:

color10_16 = ['blue', 'cyan', 'magenta', "#636efa",  "#00cc96",  "#EF553B", 'brown']
fig = make_subplots(rows=len(ff.columns), cols=len(Type), subplot_titles=('FF','RF'),vertical_spacing=0.3/len(ff.columns))

labels = ff.columns[1:]
for indexC, (cat, values) in enumerate(Type.items()):
    for indexP, params in enumerate(values.columns[1:]):
        trace = go.Scatter(x=values.iloc[:,0], y=values[params], mode='lines', line=dict(color=color10_16[indexP]))
        
        fig.append_trace(trace,indexP+1, indexC+1)
        if not indexC:
            fig.data[-1].update(name = params, legendgroup=params)
        else:
            fig.data[-1].update(showlegend=False)
        fig.update_xaxes(title_text=values.columns[0],row=indexP+1, col=indexC+1)
        fig.update_yaxes(title_text=params,row=indexP+1, col=indexC+1)
        fig.update_layout(height=1200, width=800,title_text="Car Analysis")

and this is the resulting figure:

plot
plot.png800×1200 55.7 KB

1 Like
5

This should go much easier.