Skip to main content

​
Overview

The Polygon class draws a polygon shape from an array of points. It extends the Graphics base class and supports morphing animations between different polygon shapes.

​
Class Definition

export class Polygon extends Graphics

​
Settings Interface

export interface IPolygonSettings extends IGraphicsSettings

​
Properties

​
points
Array<IPoint>
An array of polygon corner coordinates.Each IPoint has the structure:
interface IPoint {
  x: number;
  y: number;
}
​
coordinates
Array<Array<number>>
Coordinates as an array of arrays.Each coordinate is [x, y] format. This is automatically converted to points internally.
​
animationDuration
number
Number of milliseconds to play morph animation.When the points property changes, the polygon will animate from the previous shape to the new shape.
​
animationEasing
(t: Time) => Time
Easing function to use for animations.Learn more about easing functions

​
Private Properties

These properties are managed internally:
​
points
Array<IPoint>
Internal normalized points array used for rendering.
​
previousPoints
Array<IPoint>
Previous points array used for morphing animations.
​
morphProgress
number
Current morph animation progress (0-1).
​
minX
number
Minimum X coordinate of all points.
​
maxX
number
Maximum X coordinate of all points.
​
minY
number
Minimum Y coordinate of all points.
​
maxY
number
Maximum Y coordinate of all points.

​
Public Properties

​
morphAnimation
Animation<number>
The active morph animation instance.This property is set when a morph animation is triggered by changing the points property.

​
Inherited Properties

As Polygon extends Graphics, it inherits all graphics properties including:
​
fill
Color
Fill color.Learn more about colors, gradients and patterns
​
stroke
Color
Stroke (border) color.Learn more about colors, gradients and patterns
​
strokeWidth
number
Width of the stroke (border) in pixels.
​
fillOpacity
number
Opacity of the fill. 0 - fully transparent; 1 - fully opaque.
​
strokeOpacity
number
Opacity of the stroke (border). 0 - fully transparent; 1 - fully opaque.
​
shadowColor
Color | null
Color of the element’s shadow.Learn more about shadows
​
shadowBlur
number
Blurriness of the shadow.Learn more about shadows

​
Example Usage

​
Basic Polygon

import { Polygon } from "@amcharts/amcharts5";

// Create a triangle using points
let triangle = Polygon.new(root, {
  points: [
    { x: 0, y: 0 },
    { x: 100, y: 0 },
    { x: 50, y: 100 }
  ],
  fill: am5.color(0xff0000),
  stroke: am5.color(0x000000),
  strokeWidth: 2
});

​
Using Coordinates

// Create a polygon using coordinate arrays
let polygon = Polygon.new(root, {
  coordinates: [
    [0, 0],
    [100, 0],
    [100, 100],
    [0, 100]
  ],
  fill: am5.color(0x0000ff)
});

​
Morphing Animation

// Create a polygon that will animate when shape changes
let morphingPolygon = Polygon.new(root, {
  points: [
    { x: 0, y: 0 },
    { x: 100, y: 0 },
    { x: 50, y: 100 }
  ],
  animationDuration: 1000,
  animationEasing: am5.ease.inOut(am5.ease.cubic)
});

// Later, change the shape (will animate)
morphingPolygon.set("points", [
  { x: 0, y: 0 },
  { x: 100, y: 0 },
  { x: 100, y: 100 },
  { x: 0, y: 100 }
]);

​
Notes

  • When morphing between polygons with different numbers of points, the class automatically normalizes both shapes to have the same number of points for smooth animation.
  • The polygon automatically calculates its bounding box based on the provided points.
  • Available since version 5.4.0

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us