# How to include a colorscale for color of line graphs

**URL:** <https://community.plotly.com/t/how-to-include-a-colorscale-for-color-of-line-graphs/38002>\
**Category:** 📊 Plotly Python\
**Created:** [April 18, 2020, 4:28pm UTC](https://community.plotly.com/t/how-to-include-a-colorscale-for-color-of-line-graphs/38002 "2020-04-18T16:28:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![msuths1](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/msuths1/32/8990_2.png) [@msuths1](https://community.plotly.com/u/msuths1)\
**Post date:** [April 18, 2020, 4:28pm UTC](https://community.plotly.com/t/how-to-include-a-colorscale-for-color-of-line-graphs/38002/1 "2020-04-18T16:28:36Z")

</div>

Hi,  
Hope you are well. I wanted to recreate a vector plot like the one below using Plotly:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/d31e602d3c84234d5761283f873ac5b4cdb95d41.png)  
I have written code (below), that plots the vectors as desired, however, I wanted to assign a colour scale to the colours of the lines. The colours of the lines would be equal to df[“cos2”]. I am unsure of how to proceed and include this. Any help would be much appreciated.  
The output of current code:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/c/c6102ae48870f3e956e596134665661469b896c9.png)

```auto
import pandas as pd
import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import flask

server = flask.Flask( __name__ )
app = dash.Dash( __name__ , server=server)

file_path = "/Users/mythilisutharson/documents/cam_work/explorer_data/AAML_Oxygen_Data_cos2.csv"
df = pd.read_csv(file_path)

fig = go.Figure()
fig1 = go.Figure()

app.layout = html.Div([
    html.Div([
                    html.Div([dcc.Graph(id='cos2-plot', figure=fig)
                              ], style={},
                             ),
html.Div(
                        [html.Label(["Remove outliers (if any) in analysis:", dcc.RadioItems(
                            id='outlier-value-cos2',
                            options=[{'label': 'Yes', 'value': 'Yes'},
                                     {'label': 'No', 'value': 'No'}],
                            value='No')
                                     ])
                         ], style={'display': 'inline-block',
                                   'width': '49%'}),

])
])

@app.callback(Output('cos2-plot', 'figure'),
              [
                  Input('outlier-value-cos2', 'value'),
              ])
def update_cos2_plot(outlier):
    if outlier == 'Yes':
        data = df
    counter = 0
    lists = [[] for i in range(len(df['line_group'].unique()))]
    for i in df['line_group'].unique():
        dataf_all = df[df['line_group'] == i]
        trace1_all = go.Scatter(x=dataf_all['PC1'], y=dataf_all['PC2'], mode='lines+text',
                                name=i,
                                textposition='bottom right', textfont=dict(size=12)
                                )
        lists[counter] = trace1_all
        counter = counter + 1
    return {'data': lists,
            'layout': go.Layout(showlegend=False)}

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

```

Data used for code:

> **[AAML\_Oxygen\_Data\_cos2.csv](https://drive.google.com/file/d/1Cn4CJS-WcQixaXfxyh5C0aY4pYVUEZZ2/view?usp=sharing)**
>
> Google Drive file.

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [April 19, 2020, 7:29am UTC](https://community.plotly.com/t/how-to-include-a-colorscale-for-color-of-line-graphs/38002/2 "2020-04-19T07:29:59Z")

</div>

Hi msuths1,

Plotly does not provide the colorscale attribute for lines of a scatter trace, of `mode='lines'`.  
Even heatmap, contour and surface don’t return the color code in a colorscale corresponding to a z-value.

For your vectors you can use a custom function that returns the color for each particular value in an interval.  
To call such a function you have first to choose from plotly.colors [https://github.com/plotly/plotly.py/tree/master/packages/python/plotly/\_plotly\_utils/colors](https://github.com/plotly/plotly.py/tree/master/packages/python/plotly/_plotly_utils/colors)  
a list of colors, `pl_colors`, for a colorscale:

```auto
from plotly.colors import * 

pl_colors = cmocean.deep # define the deep colorsale

```

The custom function:

```auto
from ast import literal_eval
import numpy as np
def get_color_for_val(val, vmin, vmax, pl_colors):
    
    if pl_colors[0][:3] != 'rgb':
        raise ValueError('This function works only with Plotly rgb-colorscales')
    if vmin >= vmax:
        raise ValueError('vmin should be < vmax')
    
    scale = [k/(len(pl_colors)-1) for k in range(len(pl_colors))] 
   
   
    colors_01 = np.array([literal_eval(color[3:]) for color in pl_colors])/255. #color codes in [0,1]
   
    v= (val - vmin) / (vmax - vmin) # val is mapped to v in [0,1]
    #find two consecutive values in plotly_scale such that v is in the corresponding interval
    idx = 1
   
    while(v > scale[idx]): 
        idx += 1
    vv = (v - scale[idx-1]) / (scale[idx] -scale[idx-1] )
    
    #get [0,1]-valued color code representing the rgb color corresponding to val
    val_color01 = colors_01[idx-1] + vv * (colors_01[idx] - colors_01[idx-1])
    val_color_0255 = (255*val_color01+0.5).astype(int)
    return f'rgb{str(tuple(val_color_0255))}'

```

Example:

```auto
get_color_for_val(2.3, 1, 5, pl_colors) 

```

returns `'rgb(62, 81, 157)'`

In your case vmin, vmax are the min, respectively the max value in the column `cos2`.

Unfortunately you cannot plot a naturally associated colorbar. To get it displayed you should define a dummy `Scatter` trace, `mode='markers'`, with two markers, of size= 0, and `marker['color']=[vmin, vmax]`.

---

<div class="post-metadata">

**Author:** ![msuths1](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/msuths1/32/8990_2.png) [@msuths1](https://community.plotly.com/u/msuths1)\
**Post date:** [April 20, 2020, 11:52am UTC](https://community.plotly.com/t/how-to-include-a-colorscale-for-color-of-line-graphs/38002/3 "2020-04-20T11:52:44Z")

</div>

Hi @empet,  
Thank you for your detailed explanation. I have tried incorporating the custom function that you have mentioned but an error comes up.

```auto
import pandas as pd
import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import flask
from plotly.colors import *
from ast import literal_eval
import numpy as np

server = flask.Flask( __name__ )
app = dash.Dash( __name__ , server=server)

file_path = "/Users/mythilisutharson/documents/cam_work/explorer_data/AAML_Oxygen_Data_cos2.csv"
df = pd.read_csv(file_path)

fig = go.Figure()
fig1 = go.Figure()

app.layout = html.Div([
    html.Div([
                    html.Div([dcc.Graph(id='cos2-plot', figure=fig)
                              ], style={},
                             ),
html.Div(
                        [html.Label(["Remove outliers (if any) in analysis:", dcc.RadioItems(
                            id='outlier-value-cos2',
                            options=[{'label': 'Yes', 'value': 'Yes'},
                                     {'label': 'No', 'value': 'No'}],
                            value='No')
                                     ])
                         ], style={'display': 'inline-block',
                                   'width': '49%'}),

])
])

pl_colors = cmocean.deep
def get_color_for_val(val, vmin, vmax, pl_colors):
    if pl_colors[0][:3] != 'rgb':
        raise ValueError('This function works only with Plotly rgb-colorscales')
    if vmin >= vmax:
        raise ValueError('vmin should be < vmax')

    scale = [round(k / (len(pl_colors)), 3) for k in range(len(pl_colors) + 1)]

    colors_01 = np.array([literal_eval(color[3:]) for color in pl_colors]) / 255 # color codes in [0,1]

    v = (val - vmin) / (vmax - vmin) # val is mapped to v in [0,1]
    # find two consecutive values in plotly_scale such that v is in the corresponding interval
    idx = 0

    while (v > scale[idx + 1]):
        idx += 1

    vv = (v - scale[idx]) / (scale[idx + 1] - scale[idx])

    # get [0,1]-valued color code representing the rgb color corresponding to val
    val_color01 = colors_01[idx] + vv * (colors_01[idx + 1] - colors_01[idx])
    val_color_0255 = (255 * val_color01 + 0.5).astype(int)
    return f'rgb{str(tuple(val_color_0255))}'

@app.callback(Output('cos2-plot', 'figure'),
              [
                  Input('outlier-value-cos2', 'value'),
              ])
def update_cos2_plot(outlier):
    if outlier == 'Yes':
        data = df
    counter = 0
    lists = [[] for i in range(len(df['line_group'].unique()))]
    for i in df['line_group'].unique():
        dataf_all = df[df['line_group'] == i]
        trace1_all = go.Scatter(x=dataf_all['PC1'], y=dataf_all['PC2'], mode='lines+text',
                                name=i,
                                line=dict(color=get_color_for_val(dataf_all["cos2"], df["cos2"].min(), df["cos2"].max(), pl_colors)),
                                textposition='bottom right', textfont=dict(size=12)
                                )
        lists[counter] = trace1_all
        counter = counter + 1
    
    return {'data': lists,
            'layout': go.Layout(showlegend=False)}

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

```

For the line

```auto
    while (v > scale[idx + 1]):

```

I get the error:  
“The truth value of a Series is ambiguous. Use a.empty, a.bool(), a.item(), a.any() or a.all().”  
I am unsure of how to fix this.  
Thank you!

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [April 20, 2020, 12:31pm UTC](https://community.plotly.com/t/how-to-include-a-colorscale-for-color-of-line-graphs/38002/4 "2020-04-20T12:31:05Z")

</div>

@msuths1  
That error appears because you passed to the function ` get_color_for_val` the whole column cos2.  
It works only for individual values.  
Namely, for each val in cos2 you get a color code for a line ( vector). Define a scatter trace, `mode=' lines'` for each vector, and set as `line['color']` the computed color. Unlike the ` marker['color']`, the line[‘color’] cannot be a list o colors.

---

<div class="post-metadata">

**Author:** ![msuths1](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/msuths1/32/8990_2.png) [@msuths1](https://community.plotly.com/u/msuths1)\
**Post date:** [April 21, 2020, 5:29pm UTC](https://community.plotly.com/t/how-to-include-a-colorscale-for-color-of-line-graphs/38002/5 "2020-04-21T17:29:40Z")

</div>

Hi @empet,  
Thank you! I have now got it working.