Polyline

The <Polyline /> element is used to create any shape that consists of only straight lines (that is connected at several points).

import { Svg, Polyline } from '@react-pdf/renderer';

const Trend = () => (
  <Svg viewBox="0 0 120 60" width={240} height={120}>
    <Polyline
      points="8,46 28,34 48,38 68,20 88,26 112,10"
      fill="none"
      stroke="#e82200"
      strokeWidth={3}
      strokeLinejoin="round"
    />
  </Svg>
);

Show preview

Valid props

Prop name	Description	Type	Default
points	This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline	String	undefined

Valid props

On this page