Gradient Lines in Dash

Dash Python
1

Hello,

I’m trying to create a line chart with the line’s color being gradient (e.g. blue slowly fading to green in color) within Dash. After doing some research (Scatter line gradient?) it seems that it’s a feature that has been “worked” on for a few years, but never completed.

I was wondering if it’s possible to do this maybe in other ways? Throwing ideas out here, but could cmocean be used? It seems as though they have a gradient feature: https://matplotlib.org/cmocean/ – to my understanding Plotly can integrate with cmocean (https://plotly.com/python/v3/cmocean-colorscales/).

However, I’m not sure how to create a cmocean graph within Dash.

I tried implementing the following code into my Dash app but it did not work:

import cmocean
import cmocean.cm as cmo
import matplotlib.pyplot as plt

fig = plt.figure(figsize=(8, 3))
ax = fig.add_subplot(1, 2, 1)
Z = np.random.randn(10,10)
ax.pcolormesh(Z, cmap=cmo.matter)

ax = fig.add_subplot(1, 2, 2)
lightcmap = cmocean.tools.lighten(cmo.matter, 0.5)
ax.pcolormesh(Z, cmap=lightcmap)
fig.tight_layout()

My original attempt was: ‘line’: {‘color’: ‘linear-gradient(90deg, red, red 60%, white)’ }

  dcc.Graph(
        id='MORTGAGE_RATES',
        figure={
            'data': [
                 { "x": MORTGAGE30US['date'],"y": MORTGAGE30US['value'],"mode": "lines","name": '30 YR', 'line': {'color': 'linear-gradient(90deg, red, red 60%, white)' }},
                 { "x": MORTGAGE15US['date'],"y": MORTGAGE15US['value'],"mode": "lines","name": '15 YR',},


            ],
            'layout': {
                'title': 'MORTGAGE RATES',
                "paper_bgcolor": "rgb(46, 54, 65)",
                "plot_bgcolor": "rgb(46, 54, 65)",
                'font': {
                    'color': "rgb(255,255,255)"
                }
            }
        }
    )