AnyChart
API Reference
Still have questions?
Contact support
Top

class anychart.graphics.vector.Path Improve this Doc

Extends: anychart.graphics.vector.Shape

Path class.
Path is sequence of segments of different type, it can be opened or closed.
To define the internal fill this rule is used EVEN-ODD.
Path always starts with anychart.graphics.vector.Path#moveTo command.
Do not invoke constructor directly. Use anychart.graphics.vector.Stage#path or anychart.graphics.vector.Layer#path to create stage or layer bound path.
To create unbound path use anychart.graphics#path
See also:
anychart.graphics.vector.Stage#path
anychart.graphics.vector.Layer#path
anychart.graphics#path

Methods Overview

Coloring
fill()Fill settings.
stroke()Stroke settings.
Events
listen()Adds an event listener.
listenOnce()Adds an event listener that is removed automatically after the listener fired once.
removeAllListeners()Removes all listeners from this listenable.
unlisten()Removes an event listener which was added with listen() or listenOnce().
Interactive
drag()Dragging setting.
Interactivity
visible()Visibility flag
Size and Position
appendTransformationMatrix()Combines the current transformation with the given transformation matrix.
getAbsoluteBounds()Gets element bounds in absolute coordinates (root element coordinate system).
getAbsoluteHeight()Returns height within root bounds.
getAbsoluteWidth()Returns width within root bounds.
getAbsoluteX()Returns an absolute X (root element coordinate system).
getAbsoluteY()Returns an absolute Y (root element coordinate system).
getBounds()Returns the bounds.
getHeight()Returns the height.
getRotationAngle()Returns the current rotation angle in degrees.
getTransformationMatrix()Returns the current transformation matrix.
getWidth()Returns the width.
getX()Returns X in the coordinate system of the parent.
getY()Returns Y in the coordinate system of the parent.
rotate()Rotates a shape around the given rotation point.
rotateByAnchor()Rotates a shape around the given anchor.
scale()Scales a shape. Scaling center is set in the coordinate system of the parent.
scaleByAnchor()Scales a shape by anchor. Scaling center is set as an anchor.
setPosition()Sets top left corner of a shape (transformation taken into account) in the coordinate system of the parent.
setRotation()Rotates a shape around the given point.
setRotationByAnchor()Rotates a shape around the given anchor.
setTransformationMatrix()Sets the transformation matrix.
translate()Moves a shape taking an account the current transformation.
zIndex()Z-index setting.
Miscellaneous
arcTo()Adds a command to the path that draws an arc of an ellipse.
arcToAsCurves()This method is similar to anychart.graphics.vector.Path#arcTo, but in this case the arc is approximated by Bezier curves.
arcToByEndPoint()Adds a command to the path that draws an arc of an ellipse.
attr()Attribute setting
circularArc()Adds a command to the path that draws a circular arc.
clear()Resets all path operations.
clip()Clipping setting.
close()Adds a command that closes the path by connecting the last point with the first straight line.
cursor()Cursor type.
curveTo()Adds specified points to the path, drawing sequentially a cubic Bezier curve from the current point to the next.
desc()Description setting
disablePointerEvents()Pointer events setting.
disableStrokeScaling()Vector effect property
dispose()Disposes element completely.
domElement()Returns DOM element if element is rendered.
getCurrentPoint()Returns the last coordinates added to the path.
getLength()Gets path length.
getStage()Stage object (to which the given element is bound).
hasParent()Whether parent element is set.
id()Element identifier
lineTo()Adds specified points to the current path, drawing sequentially a straight line through the specified coordinates.
moveTo()Moves path cursor position to a specified coordinate.
parent()Parent layer.
quadraticCurveTo()Adds specified points to the path, drawing sequentially a quadratic Bezier curve from the current point to the next.
remove()Current element removes itself from the parent layer.
strokeThickness()Stroke thickness setting.
title()Title setting

Methods Description

appendTransformationMatrix

Combines the current transformation with the given transformation matrix.

Params:

NameTypeDescription
m00numberScale X.
m10numberShear Y.
m01numberShear X.
m11numberScale Y.
m02numberTranslate X.
m12numberTranslate Y.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

arcTo

Adds a command to the path that draws an arc of an ellipse.
An ellipse with radius rx, ry, starting from an angle fromAngle, with an angular length extent.
The positive direction is considered the direction from a positive direction of the X-axis to a positive direction of the Y-axis, that is clockwise.

Params:

NameTypeDescription
rxnumberThe X-axis radius of the ellipse.
rynumberThe Y-axis radius of the ellipse.
fromAnglenumberThe starting angle, measured in degrees in a clockwise direction.
extentnumberThe angular length of the arc.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

arcToAsCurves

This method is similar to anychart.graphics.vector.Path#arcTo, but in this case the arc is approximated by Bezier curves.

Params:

NameTypeDescription
rxnumberThe X-axis radius of the ellipse.
rynumberThe Y-axis radius of the ellipse.
fromAnglenumberThe starting angle, measured in degrees in a clockwise direction.
extentnumberThe angular length of the arc.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

arcToByEndPoint

Adds a command to the path that draws an arc of an ellipse.
An arc of an ellipse with radius rx, ry rx, ry from the current point to a point x, y.
The largeArc and clockwiseArc flags define which of the 4 possible arcs is drawn.
Read more at https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes

Params:

NameTypeDescription
xnumberThe X-coordinate of the arc end.
ynumberThe Y-coordinate of the arc end.
rxnumberThe X-axis radius of the ellipse.
rynumberThe Y-axis radius of the ellipse.
largeArcbooleanA flag allowing to draw either the smaller or the larger arc.
clockwiseArcbooleanA flag allowing to draw an arc either in a clockwise or in a counterclockwise direction.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

attr

Getter for the attribute.

Params:

NameTypeDescription
keystringName of attribute.

Returns:

* - Attribute value.
Setter for the attribute.

Params:

NameTypeDescription
keystringName of attribute.
value*Value of attribute.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

circularArc

Adds a command to the path that draws a circular arc.
An arc with a center in (cx, cy) start angle (from) and end angle (from + sweep), with clockwise and counterclock drawing option.

Params:

NameTypeDefaultDescription
cxnumber
Center x.
cynumber
Center y.
rxnumber
The X-axis radius of the ellipse.
rynumber
The Y-axis radius of the ellipse.
fromAnglenumber
The starting angle, measured in degrees in a clockwise direction.
sweepnumber
Sweep angle in degrees.
lineToboolean
false
Line to start point. If set to true - anychart.graphics.vector.Path#lineTo will be used instead of anychart.graphics.vector.Path#moveTo.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

clear

Resets all path operations.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

clip

Gets the current clipping rectangle.

Returns:

anychart.graphics.math.Rect - An instance of the class for method chaining.
Sets the clipping rectangle.

Params:

NameTypeDescription
valueanychart.graphics.math.Rect | stringClipping rectangle.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

close

Adds a command that closes the path by connecting the last point with the first straight line.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

cursor

Getter for the current cursor type.

Returns:

anychart.graphics.vector.Cursor - Current cursor type.
Setter for the cursor type.

Params:

NameTypeDefaultDescription
valueanychart.graphics.vector.Cursor
null
Cursor type.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

curveTo

Adds specified points to the path, drawing sequentially a cubic Bezier curve from the current point to the next.
Each curve is defined by 3 points (6 coordinates) - two control points and an endpoint.

Params:

NameTypeDescription
control1XnumberThe first control point's X-coordinate.
control1YnumberThe first control point's Y-coordinate.
control2XnumberThe second control point's X-coordinate.
control2YnumberThe second control point's Y-coordinate.
endXnumberThe endpoint's X-coordinate.
endYnumberThe endpoint's Y-coordinate.
var_argsnumberThe coordinates, defining curves, in sets of 6: first control points, then an endpoint (in the same order as the primary parameters).

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

desc

Getter for the element description value.

Returns:

string | null | undefined - The element description value.
Setter for the element description value.

Params:

NameTypeDescription
valuestring | nullValue to set.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

disablePointerEvents

Gets the current value of the pointer events.

Returns:

boolean - Returns property value.
Disables the pointer events.

Params:

NameTypeDefaultDescription
valueboolean
false
Pointer events property value.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

disableStrokeScaling

Getter for the current element's vector effect property.

Returns:

boolean - The current vector effect property.
See listing
var element = stage.rect(10, 10, 100, 40);
element.disableStrokeScaling();
Setter for the element's vector effect property.
Learn more by link.

Params:

NameTypeDefaultDescription
valueboolean
false
Vector effect property to set.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

dispose

Disposes element completely. Removes it from the parent layer, sets links to null, removes it from DOM.

domElement

Returns DOM element if element is rendered.
In case of Stage in Suspended state or unbound element - null is returned.

Returns:

Element - DOM element.

drag

Returns the current state flag.

Returns:

boolean | anychart.graphics.math.Rect - Absolute element bounds or flag.
Turns off/on dragging (moving) of an element.

Params:

NameTypeDefaultDescription
valueboolean | anychart.graphics.math.Rect
false
Flag or a dragging area.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

fill

Gets the current fill.

Returns:

anychart.graphics.vector.Fill - The current fill (empty fill is 'none").
Sets a fill as an object or a string.

Params:

NameTypeDescription
coloranychart.graphics.vector.FillFill as object or string.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.
Sets a fill with opacity.

Params:

NameTypeDescription
colorstringColor as string.
opacitynumberOpacity.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.
Linear gradient fill.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Gradient keys.
anglenumberGradient angle.
modeboolean | anychart.graphics.vector.Rect | ObjectGradient mode.
opacitynumberGradient opacity.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.
Radial gradient fill.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Color-stop gradient keys.
cxnumberX ratio of center radial gradient.
cynumberY ratio of center radial gradient.
modeanychart.graphics.math.RectIf defined then userSpaceOnUse mode else objectBoundingBox.
opacitynumberOpacity of the gradient.
fxnumberX ratio of focal point.
fynumberY ratio of focal point.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

getAbsoluteBounds

Gets element bounds in absolute coordinates (root element coordinate system).

Returns:

anychart.graphics.math.Rect - Absolute element bounds.

getAbsoluteHeight

Returns height within root bounds.
See illustrations at anychart.graphics.vector.Element#getAbsoluteWidth

Returns:

number - Height.

getAbsoluteWidth

Returns width within root bounds.

Returns:

number - Width.

getAbsoluteX

Returns an absolute X (root element coordinate system).

Returns:

number - Absolute X.

getAbsoluteY

Returns an absolute Y (root element coordinate system).

Returns:

number - Absolute Y.

getBounds

Returns the bounds.

Returns:

anychart.graphics.math.Rect - Bounds.

getCurrentPoint

Returns the last coordinates added to the path.

Returns:

anychart.graphics.math.Coordinate - The current coordinates of the cursor.

getHeight

Returns the height.

Returns:

number - Height.

getLength

Gets path length.

Returns:

number - Returns path length of element in pixels.

getRotationAngle

Returns the current rotation angle in degrees.

Returns:

number - Rotation angle.

getStage

Stage object (to which the given element is bound).

Returns:

anychart.graphics.vector.Stage - Stage object.

getTransformationMatrix

Returns the current transformation matrix.

Returns:

Array.<number> - Transformation matrix array.

getWidth

Returns the width.

Returns:

number - Width.

getX

Returns X in the coordinate system of the parent.

Returns:

number - X in the coordinate system of the parent.

getY

Returns Y in the coordinate system of the parent.

Returns:

number - Y in the coordinate system of the parent.

hasParent

Whether parent element is set.

Returns:

boolean - Whether parent element is set.

id

Gets the current element identifier.

Returns:

string - Returns element identifier.
Sets the element identifier.

Params:

NameTypeDescription
idstringCustom identifier.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

lineTo

Adds specified points to the current path, drawing sequentially a straight line through the specified coordinates.

Params:

NameTypeDescription
xnumberA target point's X-coordinate.
ynumberA target point's Y-coordinate.
var_argsnumberThe target points' coordinates: each odd parameter is interpreted as X and each even as Y.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

listen

Adds an event listener.

Params:

NameTypeDefaultDescription
typestring
The event type id.
listenerfunction(e:Object):boolean|undefined
Callback method.
useCaptureboolean
false
Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing
listenerScopeObject
Object in whose scope to call the listener.

Returns:

Object - Unique key for the listener.

listenOnce

Adds an event listener that is removed automatically after the listener fired once.

Params:

NameTypeDefaultDescription
typestring
The event type id.
listenerfunction(e:Object):boolean|undefined
Callback method.
useCaptureboolean
false
Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing
listenerScopeObject
Object in whose scope to call the listener.

Returns:

Object - Unique key for the listener.

moveTo

Moves path cursor position to a specified coordinate.
Remember that if you call the moveTo method a few times in a row, only the last call will be applied.

Params:

NameTypeDescription
xnumberThe target point's X-coordinate.
ynumberThe target point's Y-coordinate.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

parent

Returns the parent layer.

Returns:

anychart.graphics.vector.Layer | anychart.graphics.vector.Stage - Instance of element current layer.
Adds element to the given layer.

Params:

NameTypeDescription
parentanychart.graphics.vector.Layer | anychart.graphics.vector.StageParent layer.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

quadraticCurveTo

Adds specified points to the path, drawing sequentially a quadratic Bezier curve from the current point to the next. Each curve is defined by 2 points (4 coordinates) - a control point and an endpoint.

Params:

NameTypeDescription
controlXnumberThe control point's X-coordinate.
controlYnumberThe control point's Y-coordinate.
endXnumberThe endpoint's X-coordinate.
endYnumberThe endpoint's Y-coordinate.
var_argsnumbercoordinates, defining curves, in sets of four: first the control point, then an endpoint (in the same order as the primary parameters).

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

remove

Current element removes itself from the parent layer.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

removeAllListeners

Removes all listeners from this listenable.

Params:

NameTypeDescription
typestringType of event to remove, default is to remove all types.

Returns:

number - Number of listeners removed.

rotate

Rotates a shape around the given rotation point.

Params:

NameTypeDescription
degreesnumberRotation angle in degrees.
cxnumberRotation point X.
cynumberRotation point Y.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

rotateByAnchor

Rotates a shape around the given anchor.

Params:

NameTypeDescription
degreesnumberRotation angle in degrees.
anchoranychart.graphics.vector.Anchor | stringRotation anchor.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

scale

Scales a shape. Scaling center is set in the coordinate system of the parent.

Params:

NameTypeDescription
sxnumberX scaling factor.
synumberY scaling factor.
cxnumberScaling point X.
cynumberScaling point Y.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

scaleByAnchor

Scales a shape by anchor. Scaling center is set as an anchor.

Params:

NameTypeDescription
sxnumberX scaling factor.
synumberY scaling factor.
anchoranychart.graphics.vector.Anchor | stringScaling anchor point.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

setPosition

Sets top left corner of a shape (transformation taken into account) in the coordinate system of the parent.

Params:

NameTypeDescription
xnumberX coordinate.
ynumberY coordinate.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

setRotation

Rotates a shape around the given point.

Params:

NameTypeDescription
degreesnumberRotation angle in degrees.
cxnumberRotation point X.
cynumberRotation point Y.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

setRotationByAnchor

Rotates a shape around the given anchor.

Params:

NameTypeDescription
degreesnumberRotation angle in degrees.
anchoranychart.graphics.vector.Anchor | stringRotation anchor.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

setTransformationMatrix

Sets the transformation matrix.

Params:

NameTypeDescription
m00numberScale X.
m10numberShear Y.
m01numberShear X.
m11numberScale Y.
m02numberTranslate X.
m12numberTranslate Y.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

stroke

Gets the current stroke.

Returns:

anychart.graphics.vector.Stroke - The current stroke.
Sets a stroke using one parameter.

Params:

NameTypeDescription
valueanychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | string | null | ObjectStroke as '[thickness ]color[ opacity]'.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.
Sets stroke settings using several parameter.

Params:

NameTypeDescription
valueanychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | stringStroke style, as described above.
thicknessnumberLine thickness. Defaults to 1.
dashpatternstringControls the pattern of dashes and gaps used to stroke paths. Dash array contains a list of white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke dashpattern: '5 3 2' is equivalent to dashpattern: '5 3 2 5 3 2'.
lineJoinstring | anychart.graphics.vector.StrokeLineJoinLine join style.
lineCapstring | anychart.graphics.vector.StrokeLineCapLine cap style.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

strokeThickness

Gets the current stroke thickness.

Returns:

number - Thickness value.
Sets a stroke thickness.

Params:

NameTypeDescription
thicknessnumberThickness value.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

title

Getter for the element title value.

Returns:

string | null | undefined - The element title value.
Setter for the element title value.

Params:

NameTypeDescription
valuestring | nullValue to set.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

translate

Moves a shape taking an account the current transformation.

Params:

NameTypeDescription
txnumberX movement amount.
tynumberY movement amount.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

unlisten

Removes an event listener which was added with listen() or listenOnce().

Params:

NameTypeDefaultDescription
typestring
The event type id.
listenerfunction(e:Object):boolean|undefined
Callback method.
useCaptureboolean
false
Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing
listenerScopeObject
Object in whose scope to call the listener.

Returns:

boolean - Whether any listener was removed.

visible

Gets the current visibility flag.

Returns:

boolean - Returns the current visibility flag.
Hides or shows an element.

Params:

NameTypeDefaultDescription
isVisibleboolean
true
Visibility flag.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.

zIndex

Gets the current element's zIndex.

Returns:

number - Z-index.
Sets the element's zIndex.

Params:

NameTypeDescription
valuenumberZ-index to set.

Returns:

anychart.graphics.vector.Path - Self instance for method chaining.