Leader lines from pie/donut slices to external labels — pure SVG, zero JS.
Inspired by Nivo's arcLinkLabels. For each slice, renders a 3-segment polyline (radial → elbow → horizontal) with a text label at the end.
Designed to be composed inside pie/donut chart SVG.
Examples
<.arc_link_labels slices={[
%{mid_angle: -1.57, outer_radius: 90, label: "Direct", color: "oklch(0.60 0.20 240)", cx: 110, cy: 110}
]} />Summary
Functions
Attributes
slices(:list) (required) - List of%{mid_angle, outer_radius, label, color, cx, cy}for each slice.offset(:integer) - Radial offset from outer edge in px. Defaults to12.straight_length(:integer) - Horizontal line length in px. Defaults to16.font_size(:string) - Defaults to"9".class(:string) - Defaults tonil.- Global attributes are accepted.