Node label's background container is hardcoded in white color

[wthrajat]

Hello! In my web application, the node label colors are generated dynamically to ensure they are visible against the background. For example, if the web app has a dark (black) background, the node label color is set to white to provide contrast.
The default color is black node label with a white label container as can be seen in the screenshot below:

In this case, the black label color works well because the label container is white, allowing the label to stand out.

However, there is an issue when the label color is white. During hover, the label may become invisible because the label text color matches the background container color. You can see this in the screenshot below:

As you can observe, the labels are visible when not hovering, as shown in the bottom right of the screenshot."

Any idea on how can I change the color of label container (not label)?
I couldnt find the solution on the internet

[wthrajat]

Fixed myself :)
Edit: If somebody encounters this issue in the future, here is how to solve this:

Import necessary components, like:

import drawLabel from "sigma/rendering/canvas/label";

Create a custom DrawHover method that overwrites the default one:

function customDrawHover(
    context: CanvasRenderingContext2D,
    data: PartialButFor<NodeDisplayData, "x" | "y" | "size" | "label" | "color">,
    settings: Settings
  ): void {
    const size = settings.labelSize,
      font = settings.labelFont,
      weight = "bold";
  
    context.font = `${weight} ${size}px ${font}`;
  
    // Then we draw the label background
    context.fillStyle = "red"; // YOUR FAVORITE COLOR HERE FOR THE LABEL CONTAINER ;)
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.shadowBlur = 6;
    context.shadowColor = "pink"; // Whatever you wish
  
    const PADDING = 3;
  
    if (typeof data.label === "string") {
      const textWidth = context.measureText(data.label).width,
        boxWidth = Math.round(textWidth + 5),
        boxHeight = Math.round(size + 2 * PADDING),
        radius = Math.max(data.size, size / 2) + PADDING;
  
      const angleRadian = Math.asin(boxHeight / 2 / radius);
      const xDeltaCoord = Math.sqrt(
        Math.abs(Math.pow(radius, 2) - Math.pow(boxHeight / 2, 2))
      );
  
      context.beginPath();
      context.moveTo(data.x + xDeltaCoord, data.y + boxHeight / 2);
      context.lineTo(data.x + radius + boxWidth, data.y + boxHeight / 2);
      context.lineTo(data.x + radius + boxWidth, data.y - boxHeight / 2);
      context.lineTo(data.x + xDeltaCoord, data.y - boxHeight / 2);
      context.arc(data.x, data.y, radius, angleRadian, -angleRadian);
      context.closePath();
      context.fill();
    } else {
      context.beginPath();
      context.arc(data.x, data.y, data.size + PADDING, 0, Math.PI * 2);
      context.closePath();
      context.fill();
    }
  
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.shadowBlur = 0;
  
    // And finally we draw the label
    drawLabel(context, data, settings);
  }

Then put this in the renderer settings :D

  const rendererSettings = {
    labelColor: { color: "blue" }, // YOUR SECOND FAV COLOR FOR THE LABEL
    zIndex: true,
    hoverRenderer: customDrawHover // IMPORTANT
  };

  const renderer = new Sigma(graph, container, rendererSettings);