Adjusting the axis range for plotly

plotly.js
1

I have a plotly graph with 3 traces. By default the x-axis scale values are not touching the zero line, but the y-axis values are touching the zero line. I could extend the grid lines of the y-axis for another graph, by specifying range:[-0.1, maxXValue]. But for this particular graph the range doesn’t help. How can I achieve this? Attaching the code:
let maxYValue = Math.max(
…this.data[‘AC_stack_efficiencies’],
…this.data[‘DC_stack_efficiencies’],
…this.data[‘plant_efficiencies’]
);
let maxXValue = Math.max(…this.data[‘states’]);
let minXValue = Math.min(…this.data[‘states’]);

  let secondMaxYValue = this.getSecondMaxValue(this.data['AC_stack_efficiencies']);
let yDiff = maxYValue - secondMaxYValue;
let adjustedMaxYValue = maxYValue + yDiff;
  
var trace1 = {
  x: this.data['states'],
  y: this.data['AC_stack_efficiencies'],
  // type: 'scatter',
  mode: 'lines',
  name: 'Efficiency AC-Stack',
  line: {
    color: '#36A2EB',
    width: 3,
    shape: 'spline',
    smoothing: 1.3,
  },
  marker: {
    symbol: 'circle',
    size: 6,
  },
  hovertemplate:
    'State: %{x:.2f}%<br>' +
    'Efficiency AC-Stack: %{y:.2f} Kwh/Kg<br>' +
    '<extra></extra>',
};

var trace2 = {
  x: this.data['states'],
  y: this.data['DC_stack_efficiencies'],
  // type: 'scatter',
  mode: 'lines',
  name: 'Efficiency DC-Stack',
  line: {
    color: '#FF6384',
    width: 3,
    shape: 'spline',
    smoothing: 1.3,
  },
  marker: {
    symbol: 'circle',
    size: 6,
  },
  hovertemplate:
    'State: %{x:.2f}%<br>' +
    'Efficiency DC-Stack: %{y:.2f} Kwh/Kg<br>' +
    '<extra></extra>',
};

var trace3 = {
  x: this.data['states'],
  y: this.data['plant_efficiencies'],
  // type: 'scatter',
  mode: 'lines',
  name: 'Plant Efficiency',
  line: {
    color: '#000000',
    width: 3,
    dash: 'dash',
    shape: 'spline',
    smoothing: 1.3,
  },
  marker: {
    symbol: 'circle',
    size: 6,
  },
  hovertemplate:
    'State: %{x:.2f}%<br>' +
    'Plant Efficiency: %{y:.2f} Kwh/Kg<br>' +
    '<extra></extra>',
};

  const layout: Partial<Plotly.Layout> = {
    title: {
      text: 'Efficiency Curve',
      font: {
        family: 'SegoeUI-Semibold',
        size: 14,
      },
      x: 0.5, // Center title horizontally
      xanchor: 'center' as 'center',
      yanchor: 'top' as 'top',
      y: 0.95,
      pad: {
        b: 10,
      },
    },
    xaxis: {
      title: {
        text: 'Electrolyzer State (%H₂)',
        font: {
          family: 'SegoeUI-Semibold',
          size: 14,
        },
      },
      // range: [minXValue - 0.1, maxXValue], // Use minXValue to define the starting point
      tickfont: {
        family: 'SegoeUI-Semibold',
        size: 12,
      },
      fixedrange: true, // Disable zoom on the x-axis
      // ticklen: 10, // Length of the ticks
      // ticks: 'outside', // Position the ticks outside the axis
      // ticklabelposition: 'outside', // Position the labels outside
    },
    yaxis: {
      title: {
        text: 'Efficiency (Kwh/Kg)',
        font: {
          family: 'SegoeUI-Semibold',
          size: 14,
        },
      },
      // range: [-0.1, adjustedMaxYValue],
      tickfont: {
        family: 'SegoeUI-Semibold',
        size: 12,
      },
      fixedrange: true,
      // ticklen: 10, // Length of the ticks
      // ticks: 'outside', // Position the ticks outside the axis
      // ticklabelposition: 'outside', // Position the labels outside
    },
    legend: {
      font: {
        family: 'Segoe UI',
        size: 14,
        color: '#000000',
      },
      orientation: 'h', // Horizontal legend
      x: 0.5,
      xanchor: 'center',
      y: 1.2, // Position the legend below the title
      yanchor: 'top',          
    },
    showlegend: true,
    autosize: true,
  };      
  
  const options = {
    responsive: true,
    displayModeBar: true,
    toImageButtonOptions: {
      format: 'png' as 'png', // one of png, svg, jpeg, webp
      filename: 'Efficiency Curve',
      height: 500,
      width: 700,
      scale: 1, // Multiply title/legend/axis/canvas sizes by this factor
    },
    displaylogo: false,
  };

  Plotly.newPlot(this.plot, [trace1,trace2,trace3], layout, options);