Resolved: d3 : Y Axis intervals not getting set by ticks

  const extent=[0,100];
  const yScale = scaleLinear().domain(extent).range([height, 0]);
  
  const x0Scale = scaleBand()
    .domain(data.map((d) => d.month))
    .range([0, width])
    .padding(0.46);
  const x1Scale = scaleBand()
   // .domain(data.map((d) => d.type))
    .rangeRound([0, x0Scale.bandwidth()])
    .padding(0.22);

  const xAix = axisBottom(x0Scale);
  const yAix = axisLeft(yScale);
  

  svg
  .select(".x-axis")
  .attr("transform", `translate(${xMargin}, ${height + yMargin})`)
  .style("font-weight", "bold")
  .style("font-size", "0.700rem")
  .call(xAix);
  
  svg
    .select(".y-axis")
    .attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)   
    .style("font-weight", "bold")
  .style("font-size", "0.725rem")      
    .call(yAix.ticks(4).tickSize(-width).tickFormat(function(d){return d + "%"}));