Annotations on top of plot trace

plotly.js
1

Hi,
I am facing an issue in showing annotations with border and fill color below the plot trace. Every time plot data is showing below annotation.

My requirement is plot trace should be on top of annotations.
image

any solutions or tips to handle are most welcome.

Thanks in advance

2

I am also looking for a solution on the same, any ideas yet?

3

@ etienne
Can you help me out.

4

Hi @kiranyeligati ,

as far as i know annotations will be place above traces.

But if you want something like “annotations” that placed below traces you can do by adding a shape and a scatter plot with just data point to show the text (“max=5”).

var trace0 = {
  x: [2],
  y: [5],
  type: 'scatter',
  mode:'text',
  text:'max=5',
  textposition:'middle center',
  textfont:{size:14, family:'Sherif',color:'black'}

};

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 5, 1, 2, 2, 3, 4, 2],
  type: 'scatter'
};


var data = [trace0, trace1, trace2];
var layout = {
  showlegend: false,
  shapes: [
    {
      type: 'rect',
      x0: 1.6,
      y0: 4.7,
      x1: 2.4,
      y1: 5.3,
      line: {
        color: 'orange',
        width: 2
      },
      fillcolor: 'orange',
      layer:'below'
    }
  ]
};

Plotly.newPlot('myDiv', data, layout);

image
image846×529 25.5 KB

Hope this help.