I was trying to implement this kind of graph in plotly .Any one have any idea on this .Could some one can help me.

Regards

Dhaneesh

I was trying to implement this kind of graph in plotly .Any one have any idea on this .Could some one can help me.

Regards

Dhaneesh

You can define such a plot either using filled areas or shapes or both.

The code below defines a simple line (the lower line) as a scatter plot, and the upper one as a filled area (the lightblue area)https://plotly.com/python/filled-area-plots/

The darker filled area is defined as a shape with a svg path as boundary https://plotly.com/python/shapes/:

```
import numpy as np
import plotly.graph_objects as go
x= np.linspace(-1, 0.5, 100)
y1 = 0.5+(x-0.8)**2
y2 = 0.8 +(x-0.8)**2
fig=go.Figure()
fig.add_scatter(x=x, y=y1, mode="lines", line_color='gray',
line_width=0.5, showlegend=False)# the lower line
fig.add_scatter(x=x, y=y2, mode="lines", line_color="gray",
line_width=0.5, fill="tonexty",
fillcolor="lightblue") #The upper line and lightblue filled area between the two lines
fig.update_layout(width=600, height=450, xaxis_range=[-1.15, 0.8], yaxis_range=[0,5])
#Define the darker filled area as a shape having as boundary a svg path
X = np.linspace(-0.5, 0, 10)
f= lambda x: 0.5+(x-0.8)**2
g = lambda x: 0.65 +(x-0.8)**2
path= f"M "
for x in X:
y = f(x)
path+=f"{x}, {y} L"
for x in X[::-1]:
y=g(x)
path += f"{x}, {y} L"
path += f"{X[0]}, {f(X[0])}"
fig.add_shape(type="path",
path=path,
fillcolor="RoyalBlue",
line_color="RoyalBlue",)
fig.show()
```

@empet Thank you for your update .I will try to do this way but am looking for in **javascript** by mistake i tagged as python.