Skip to main content

​
Overview

The Rectangle class draws a rectangle shape. It extends the Graphics base class and renders based on width and height properties.

​
Class Definition

export class Rectangle extends Graphics

​
Settings Interface

export interface IRectangleSettings extends IGraphicsSettings

​
Properties

​
containStroke
boolean
If this is set to true, rectangle will be drawn in such a way that its stroke is contained within the rectangle’s width and height.

​
Inherited Properties

As Rectangle 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.
​
fillPattern
Pattern
Fill pattern.Learn more about patterns
​
strokePattern
Pattern
Stroke (border) pattern.Learn more about patterns
​
fillGradient
Gradient
Fill gradient.Learn more about gradients
​
strokeGradient
Gradient
Stroke (border) gradient.Learn more about gradients
​
strokeDasharray
number[] | number
Stroke (border) dash settings.Learn more about dashed lines
​
strokeDashoffset
number
Stroke (border) dash offset.Learn more about dashed lines
​
shadowColor
Color | null
Color of the element’s shadow.For this to work at least one of the following needs to be set as well: shadowBlur, shadowOffsetX, shadowOffsetY.Learn more about shadows
​
shadowBlur
number
Blurriness of the shadow. The bigger the number, the more blurry shadow will be.Learn more about shadows
​
shadowOffsetX
number
Horizontal shadow offset in pixels.Learn more about shadows
​
shadowOffsetY
number
Vertical shadow offset in pixels.Learn more about shadows
​
shadowOpacity
number
Opacity of the shadow (0-1).If not set, will use the same as fillOpacity of the element.Learn more about shadows
​
draw
(display: IGraphics, graphics: Graphics) => void
Drawing function.Must use renderer (display parameter) methods to draw.Learn more about custom draw functions
​
svgPath
string
Draw a shape using an SVG path.Learn more about SVG paths
​
nonScalingStroke
boolean
default:"false"
Indicates if stroke of a Graphics should stay the same when its scale changes.Note: This doesn’t take into account parent container scale changes.
​
lineJoin
"miter" | "round" | "bevel"
default:"\"miter\""
A method to be used on anchor points (joints) of the multi-point line.Learn more about lineJoin@since 5.2.10
​
lineCap
"butt" | "round" | "square"
default:"\"butt\""
This setting determines the shape used to draw the end points of lines.Learn more about lineCap@since 5.10.8

​
Methods

​
width()

Returns the width of the rectangle. 
public width(): number

​
height()

Returns the height of the rectangle. 
public height(): number

​
Example Usage

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

// Create a rectangle
let rectangle = Rectangle.new(root, {
  width: 100,
  height: 50,
  fill: am5.color(0x0000ff),
  stroke: am5.color(0x000000),
  strokeWidth: 2,
  containStroke: true
});

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us