How to make the y axis zero line bold?

Hi again, new user here. :slight_smile: The project I’m working on has a line chart with positive and negative values plotted on the y axis. I need for the y axis zero line to be bolder and stand out from the other lines. How can I modify my code to do that? Thanks so much!

import * as d3 from "d3";
import * as React from "react";

interface ChartPoint {
  date: Date;
  pointTotal: number;
  cum: number;
  ytd: number;
}

interface ChartLine {
  color: string;
  name: string;
  points: ChartPoint[];
}

function lineChart(svgRef: React.RefObject<SVGSVGElement>, data: ChartLine[]) {
  const svg = d3.select(svgRef.current);

  const width = 1400;
  const height = 580;
  const margin = 50;
  const duration = 250;
  const lineOpacity = "1";
  const circleOpacity = "0.85";
  const circleRadius = 7;
  const circleRadiusHover = 6;

  const tooltip = d3
    .select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .style("background-color", "#ffffff");

  const emptyChart = 0 === data.length;

  var d = new Date();

  /* Scale - // map through all the months for empty chart dates*/
  const [minX, maxX] = emptyChart
    ? [d.setMonth(d.getMonth() - 24), d.setMonth(d.getMonth() - 24)]
    : d3.extent<ChartPoint, Date>(data[0].points, (d) => d.date);

  const xScale = d3
    .scaleTime()
    .domain([minX!, maxX!])
    .range([0, width - margin]);

  const [minY, maxY] = emptyChart
    ? [0, 100000]
    : d3.extent<number, number>(
        data.map((set) => set.points.map((point) => point.pointTotal)).flat(),
        (d) => d
      );

  // @ts-ignore
  const yScale = d3
    .scaleLinear()
    .domain([minY!, maxY!])
    .range([height - margin, 0])
    .nice();

  /* Add SVG */
  svg
    .attr("viewBox", `700 0 40 90`)
    .attr("preserveAspectRatio", "xMidYMid meet")
    .append("g")
    .attr("transform", `translate(${margin}, ${margin})`);

  const xAxis = d3
    .axisBottom(xScale)
    .tickSizeOuter(0)
    .tickSize(height - margin)
    .tickFormat(
      d3.timeFormat("%b") as unknown as (
        dv: number | { valueOf(): number },
        i: number
      ) => string
    )
    .ticks(23)
    .tickPadding(15);

  const yAxis = d3
    .axisLeft(yScale)
    .tickSize(margin - width)
    .tickSizeOuter(0)
    .ticks(12)
    .tickPadding(30);

  // Add the X Axis
  svg
    .append("g")
    .attr("class", "x axis")
    .attr("transform", `translate(${margin}, ${margin})`)
    .attr("font-family", '"Roboto", "sans-serif"')
    .call(xAxis)
    .call((g) =>
      g
        .selectAll(".tick line")
        .attr("class", "axis_tick")
        .attr("stroke", "#556066")
    );

  // 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)");

  if (!emptyChart) {
    /* Add line into SVG */
    const line = d3
      .line<ChartPoint>()
      .x((d) => xScale(d.date))
      .y((d) => yScale(d.ytd));

    const lines = svg
      .append("g")
      .attr("class", "lines")
      .attr("transform", `translate(${margin}, ${margin})`);

    // draws out line and different points
    lines
      .selectAll("line-group")
      .data(data)
      .enter()
      .append("g")
      .attr("class", "line-group")
      .append("path")
      .attr("class", "line")
      .attr("d", (d) => line(d.points))
      // line color that connects dots
      // map through different lines with different colors for each line
      .style("stroke", (d, i) => d.color)
      .style("fill", "none")
      .style("opacity", lineOpacity)
      .style("stroke-width", 5);

    // /* Add circles in the line */
    lines
      .selectAll("circle-group")
      .data(data)
      .enter()
      .append("g")
      .style("fill", (d, i) => d.color)
      .selectAll("circle")
      .data((d) => d.points)
      .enter()
      .append("g")
      .attr("class", "circle")
      .on("mouseover", function (_e: MouseEvent, d) {
        // display amount on hovering of points -- tooltip
        d3.select<SVGGElement, ChartPoint>(this).style("cursor", "pointer");
        tooltip
          .html(
            `${d3.timeFormat("%b %Y")(d.date)}: &nbsp &nbsp &nbsp $${
              d.pointTotal
            }` +
              "<br/>" +
              `YTD: &nbsp &nbsp $${d.ytd}`
          )
          .style("visibility", "visible")
          .style("color", "white")
          .style("background-color", "#403D38")
          .style("font-size", "12px")
          .style("width", "130px")
          // padding
          .style("padding", ".7rem 1.5rem .7rem 1.5rem")
          .style("font-weight", "100")
          .style("font-family", "Roboto")
          .style("border-radius", "4px")
          .style("left", _e.pageX + 5 + "px")
          .style("top", _e.pageY - 28 + "px");
      })
      .on("mouseout", function () {
        d3.select(this)
          .style("cursor", "none")
          .transition()
          .duration(duration)
          .selectAll(".text")
          .remove();
        tooltip.style("visibility", "hidden");
      })
      .append("circle")
      .attr("cx", (d) => xScale(d.date!))
      .attr("cy", (d) => yScale(d.ytd))
      .attr("r", circleRadius)
      .style("opacity", circleOpacity)
      .on("mouseover", function () {
        d3.select(this)
          .transition()
          .duration(duration)
          .attr("r", circleRadiusHover);
      })
      .on("mouseout", function () {
        d3.select(this).transition().duration(duration).attr("r", circleRadius);
      });
  }
}

interface DrawChart {
  data: ChartLine[];
}

export const DrawChart = ({ data }: DrawChart) => {
  const svgRef = React.useRef<SVGSVGElement>(null);

  React.useEffect(() => {
    d3.select(svgRef.current).selectAll("g > *").remove();
    lineChart(svgRef, data);
  }, [data]);

  return <svg ref={svgRef} preserveAspectRatio="xMidYMid meet" />;
};

I assume this post has been superseded by How can I make y axis zero line bold?.