How can I make y axis zero line bold?

New To Observable
1

I’m working in a project with a line graph that plots positive and negative values on the y axis. How can I make the zero line of the y axis bold? Here is a code snippet from my project:

// Add the Y Axis
  svg
    .append("g")
    .attr("class", "y axis")
    .attr("transform", `translate(${margin}, ${margin})`)
    .attr("font-family", '"Roboto", "sans-serif"')
    .call(yAxis)
    .call((g) =>
      g
        .selectAll(".tick line")
        .attr("class", "axis_bar")
        .attr("stroke", "#556066")
    )
    .attr("stroke-dasharray", "5,5")
    .append("text")
    .attr("y", 15)
    .attr("transform", "rotate(-90)");

Thanks in advance!

2

One thing you could try, if you know that the zero tick is always, for example, the fifth one:

yAxisSvg.select(":nth-child(5) line")
     .attr("stroke-width", 3);

This would also require you to first save the result of svg.append, like so:

const yAxisSvg = svg
    .append("g")
    .attr("class", "y axis")
    ...
3

Thanks for the reply! Here’s where I ended up landing and it works pretty well:

// Add the Y Axis
  svg
    .append("g")
    .attr("class", "y axis")
    .attr("transform", `translate(${margin}, ${margin})`)
    .attr("font-family", '"Roboto", "sans-serif"')
    .call(yAxis)
    .call((g) =>
      g
        .selectAll(".tick line")
        .attr("class", "axis_bar")
        .attr("stroke", "#556066")
    )
    .attr("stroke-dasharray", "5")
    .append("line")
    .attr("class", "zero-line")
    .attr("stroke", "#000000")
    .attr("stroke-width", 3)
    .attr("x1", 0)
    .attr("y1", yScale(0))
    .attr("x2", width - margin)
    .attr("y2", yScale(0));
1 Like