Ripl

Appearance

Arc ​

An Arc draws a circular or annular (donut) arc segment defined by a center point, radius, and angular range. It supports innerRadius for donut shapes, padAngle for spacing between segments, and borderRadius for rounded corners. The getCentroid() method returns the visual center of the arc, making it easy to position labels on pie or donut slices.

Example ​

End AngleInner Radius %Pad AngleBorder Radius

Usage ​

ts
import {
    createArc,
} from '@ripl/web';

const arc = createArc({
    fill: '#3a86ff',
    cx: 200,
    cy: 200,
    radius: 100,
    startAngle: 0,
    endAngle: Math.PI,
});

Properties ​

The arc's geometry is defined by cx, cy, radius, startAngle, and endAngle. Optional properties include innerRadius (for donut arcs), padAngle (spacing between segments), and borderRadius (corner rounding).

NOTE

For the full property list, see the Arc API Reference.

Methods ​

getCentroid(alterations?) ​

Returns the centroid point [x, y] of the arc segment. Useful for positioning labels at the visual center of a pie/donut slice:

ts
const [labelX, labelY] = arc.getCentroid();

You can pass partial state alterations to compute the centroid at a different radius:

ts
const [x, y] = arc.getCentroid({ radius: arc.radius * 1.2 });