EdgeLabels

A component that renders edge labels with text that are placed at coordinates that resulted from a yFiles layout algorithm. At a single edge, there can be multiple edge labels which may be rotated.

export function CustomEdge(props: EdgeProps) {
  const [edgePath] = getPolylinePath({
    sourceX: props.sourceX,
    sourceY: props.sourceY,
    targetX: props.targetX,
    targetY: props.targetY,
    bends: props.data?.yData?.bends ?? []
  })

  return (
    <>
      <BaseEdge path={edgePath} {...props} />
      <EdgeLabelRenderer>
        <EdgeLabels
          labels={labels}
          ownerId={props.id}
          labelBoxes={props.data?.yData?.labelBoxes ?? []}
        ></EdgeLabels>
      </EdgeLabelRenderer>
    </>
  )
}

Props

EdgeLabelsProps

string

LabelBox[]

(
  | Label
  | string
  | ReactNode
)[]

CSSProperties

string