Set xaxis height for each particular tick

plotly.js
1

Hello! I want xaxis to match my graph, something like on the picture. Is it possible?
image

2

Hi @s4v1k ,

Is this the result that you are looking for?

image
image1786×672 26.2 KB

1 Like
3

Not quite

I want to have dash lines all along the graph, like on my drawing, that don’t go above the line that I have

4

Hi @s4v1k ,

I think instead using grid lines, you should creating vertical lines using shapes.

image
image1792×751 26.1 KB

const x = [1,2,3,4,5,6,6]
const y = [0.0,0.0,0.0,1111.0,1111.0,1111.0,1111.0]
var trace1 = {
  x: x,
  y: y,
  mode: 'markers+lines+text',
  type: 'scatter',
  name: 'Team A',
  text: ['0.0', '0.0', '0.0', '1111.0','1111.0','1111.0','1111.0'],
  textposition: 'top center',
  textfont: {
    family:  'Arial, sans-serif'
  },
  marker: { size: 12 }
};



var data = [ trace1];

var lines = []
function createLines(x, y) {
  return {
      type: 'line',
      x0: x,
      y0: 0,
      x1: x,
      y1: y,
      layer: "below",
      line: {
        color: 'grey',
        width: 2,
        dash: 'dot'
      },
      hoverinfo: 'skip',
    }
}

let fLen = x.length;

for (let i = 0; i < fLen; i++) {
  lines.push(createLines(x[i],y[i]))
}


var layout = {
  xaxis: {
    range: [ 0, 7 ],
    showgrid: false,
  },
  yaxis: {
    range: [0, 1200],
    showgrid: false,
  },
  legend: {
    y: 0.5,
    yref: 'paper',
    font: {
      family: 'Arial, sans-serif',
      size: 20,
      color: 'grey',
    }
  },
  title:'Scatter with vertical lines',
  shapes: lines

};

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

Hope this help.

1 Like
5

Thanks a lot!