Resolved : How to add yHighlightRange using different colors to the plotly chart

Hi all I could set a y highlight range for different considering sections using different colors:

1- set a range as you wish:

shapes: [
// The first range
type: ‘rect’,
xref: ‘x’,
yref: ‘y’,
x0: unpack(rows, ‘Date’)[0], // Start of the x-axis for the range
y0: 0,
x1: unpack(rows, ‘Date’)[rows.length - 1], // End of the x-axis for the range
y1: 79,
fillcolor: ‘…’,
opacity: …,
// Ni range

2- set annotations for ranges:

annotations: [
xref: ‘paper’,
yref: ‘y’,
x: 0.95, //positions it near the right side of the chart
y: 50, //middle of the range would be changeable based on the range numbers
xanchor: ‘right’,
yanchor: ‘middle’,
text: ‘Normal Range’,
showarrow: false,
font: {
color: ‘…’,
size: …