Cutom graph implementation in plotly

📊 Plotly Python
1

image
image540×696 39.6 KB

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

2

@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()

shape-over-filled

3

@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.