Y-Axis Label Overlap

[frscott]

Hi I have noticed that my Y-Axis Label overlaps when I have a multi-line graph but not when I have a single line graph. Here are some example pictures.

The graph is set up with an underlying radio button filtering the dataset that sometimes includes 3 grades and sometimes includes 1 grade. I also have some code that enables a "zoom in" button to set the y-axis to either the max number or 100. How can I remove the y-axis label overlap for the multi-line graph?

max = Math.max(...radio.map((o) => o.estimate))

yscale = {
  if (zoomInButton % 2 == 0) {
    return [0, 100]; 
  } else {
    return [0, max]; 
  }
}

viewof zoomInButton = buttonToggle()


import {addTooltips} from "@mkfreeman/plot-tooltip"

formatter = d3.timeFormat("%Y")

color = d3.scaleOrdinal(
  ["8th Grade", "10th Grade", "12th Grade"],
  ["#59bbeb", "#6ac4a1", "#cca438"]
)

symbol = d3.scaleOrdinal(
  ["8th Grade", "10th Grade", "12th Grade"],
  ["circle", "square", "triangle"]
)

gradeOrder = ["8th Grade", "10th Grade", "12th Grade"];

radio.sort((a, b) => gradeOrder.indexOf(a.grade) - gradeOrder.indexOf(b.grade));

plot = addTooltips(
  Plot.plot({
    width: 900,
    height: 570,
    marginBottom: 50,
    style: {
      overflow: "visible",
      fontSize: 12
    },
    symbol: {
      domain: new Set(radio.map((d) => d.grade)),
      range: [...new Set(radio.map((d) => d.grade))].map(symbol),
      legend: true,
      swatchSize: 23
    },
    color: {
      domain: new Set(radio.map((d) => d.grade)),
      range: [...new Set(radio.map((d) => d.grade))].map(color)
    },
    y: {
      label: "Percentage (%)",
      labelAnchor: "center",
      domain: yscale
    },
    x: {
      type: "time",
      domain: [new Date("1974-01-01"), new Date("2024-01-01")],
      label: "Years",
      labelAnchor: "center"
    },
    marks: [
      Plot.ruleY([0]),
      Plot.dot(radio, {
        r: 5,
        x: "year",
        y: "estimate",
        symbol: "grade",
        fill: "grade",
        title: (d) => `${d.grade} \n ${formatter(d.year)}: ${d.estimate}%`
      }),
      Plot.line(radio, {
        x: "year",
        y: "estimate",
        z: (d) => // This creates the line breaks
          [
            d.grade,
            d.LBYear1 === null
              ? d.year.getUTCFullYear() > 1974
              : d.year.getUTCFullYear() > d.LBYear1.getUTCFullYear(),
            d.LBYear2 === null
              ? d.year.getUTCFullYear() > 1974
              : d.year.getUTCFullYear() > d.LBYear2.getUTCFullYear()
          ].join(),
        stroke: "grade"
      })]
  }),
  { fill: "grade" }
)