Connect a series of points without closing the shape. Use it for line charts and open outlines.

Draw a vector polyline

tsx
import { Drawing, Polyline } from 'kuito';

export function Example() {
  return (
    <Drawing viewBox={[0, 0, 100, 100]} width={120} height={120} label="Vector example">
      <Polyline
        points={[
          [10, 80],
          [35, 40],
          [60, 55],
          [90, 15],
        ]}
        fill="none"
        stroke="#2563eb"
        strokeWidth={4}
      />
    </Drawing>
  );
}

Behavior

Place this shape inside Drawing. Coordinates use its viewBox, not screen points. Fill and stroke control paint. Shapes are drawing instructions rather than independently accessible native views.

Continue

Read Drawing for a complete workflow. See the complete prop reference for types and documented defaults.

Reference

Signatures

ts
(_props: PolylineProps): KuitoNode

Parameters

NameTypeRequiredDescription
_propsPolylinePropsYes—

Returns

KuitoNode

Props: PolylineProps

Props (including inherited props) 15

NameTypeRequiredDescription
pointsreadonly (readonly [number, number])[]Yes—
fillstringNoA hex color, or none; black by default.
fillRuleFillRuleNo—
strokestringNoA hex color, or none, the default.
strokeWidthnumberNoIn user units; 1 by default.
strokeLinecapStrokeLinecapNo—
strokeLinejoinStrokeLinejoinNo—
strokeMiterlimitnumberNo—
strokeDasharrayreadonly number[]NoDash and gap lengths in user units, repeated.
strokeDashoffsetnumberNo—
opacitynumberNoMultiplies with its Groups' opacity.
translateXnumberNoIn user units, then rotate in degrees and scale, about the origin.
translateYnumberNo—
scalenumberNo—
rotatenumberNo—
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.