How to give space/gap between the trace and the border of the graph when starting tick value of x axis and y axis coincides

plotly.js
1

pic

Is there a way to provide some gap between the trace along x axis and the graph border. The marker is only half visible. How to make it visible completely, and the tick range to be non-negative.

Below is my layout properties

const layout: Partial<Layout> = {
    title: {
      text: ``,
      font: {
        ...style,
        size: 14,
      },
    },
    margin: {
      b: 55,
      t: 40,
    },
    xaxis: {
      tick0: 0,
      rangemode: 'nonnegative',
      linecolor: '#D3D3D3',
      mirror: true,
      title: {
        standoff: 20,
        text: ``,
        font: {
          ...style,
          size: 12,
        },
      },
      zeroline: false,
      fixedrange: true,
    },
    yaxis: {
      tick0: 0,
      rangemode: 'nonnegative',
      linecolor: '#D3D3D3',
      mirror: true,
      title: {
        standoff: 15,
        text: ``,
        font: {
          ...style,
          size: 12,
        },
      },
      zeroline: false,
      fixedrange: true,
    },
    yaxis3: {
      rangemode: 'nonnegative',
      title: {
        standoff: 20,
        text: ``,
        font: {
          ...style
          size: 12,
        },
      },
      overlaying: 'y',
      side: 'right',
      zeroline: false,
      fixedrange: true,
    },
    width: tableVisibility ? 540 : 800,
    height: tableVisibility ? 408 : 380,
  };
2

Hi @Deepika ,

I think the simplest way is set the yaxis from rangemode: "nonnegative" to rangemode: "normal"

But if you want rangemode: "nonnegative" remain the same, try by adding range of yaxis and yaxis3 .

Set the explicit min and maxrange, for example your max value is 8 and min value is 0.

This code below is to give between y=0 and xaxis line by adding gap 1 point before border of the graph yaxis: {range: [-1, 9],rangemode: "nonnegative"}

image
image844×529 12.4 KB

The complete code is below:

var trace1 = {
  x: [0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: 'scatter'
};
var data = [trace1];
var layout = {
  yaxis: {range: [-1, 9],rangemode: "nonnegative"},
};
Plotly.newPlot('myDiv', data, layout);

Hope this help.

2 Likes