grid color not applied for the left axis column number 1

[Meenakshi Sekar]

Hi,

I have set the grid color to grey for both horizontal and vertical grid lines. Grey is set for the grid lines except the 1st left column grid line. can you please check and let me know what is wrong.

Here is the code snippet
`

<title>Line Chart with Grid Lines</title> <script src="https://d3js.org/d3.v6.min.js"></script> <style> /* Define CSS styles for the chart */ .line-chart-container { text-align: center; }

.grid line {
// stroke: lightgray;
stroke: grey !important;

}
</style>

<script> const data = [ { x: 1.5, y: 2.5 , backcellcolor : "red"}, { x: 2.5, y: 3.5 }, { x: 3.5, y: 5.5 ,forecolor: "red"}, { x: 4.5, y: 6.5 , backcellcolor : "blue",forecolor: "red"}, { x: 5.5, y: 8.5 }, { x: 6.5, y: 9.5 }, { x: 7.5, y: 3.5 , backcellcolor : "red"}, ]; // Chart dimensions const width = 500; const height = 270; const margin = { top: 20, right: 30, bottom: 30, left: 40 }; const svg = d3.select("#line-chart") .attr("width", width) .attr("height", height); // Define the y-axis range and interval const yMin = 1; const yMax = 10; const yInterval = 1; // Define scales const xScale = d3.scaleLinear() .domain([yMin,yMax]) .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .domain([1, 10]) .range([height - margin.bottom, margin.top]); // Set the y-axis tick values const yTicks = d3.range(1, 10 + yInterval, yInterval); const xTicks = d3.range(yMin, yMax + yInterval, yInterval); //Add the grid lines for the x-axis and y-axis svg.append("g") .attr("class", "grid") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale).tickValues(xTicks).tickSize(-height + margin.top + margin.bottom).tickFormat('')) .selectAll("line") .style("stroke", "grey"); svg.append("g") .attr("class", "grid") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale).tickValues(yTicks).tickSize(-width + margin.left + margin.right).tickFormat('')) .selectAll("line") .style("stroke", "grey"); // d3.selectAll(".grid line") // .style("stroke", "grey"); // fill the color for the cell svg.selectAll(".cell") .data(data) .enter() .append("rect") .attr("class", "cell") .attr("x", d => xScale(d.x) -23.5) .attr("y", d => yScale(d.y) - 11.9) .attr("width", 47) .attr("height", 23.8) .attr("fill", d => d.backcellcolor || "transparent"); svg.selectAll(".cell-label") .data(data) .enter() .append("text") .attr("class", "cell-label") .attr("x", d => xScale(d.x)) .attr("y", d => yScale(d.y) + 3) .text(d => `${d.y}`) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("fill", d => d.forecolor || "black"); </script> `