AnyChart
API Reference
Still have questions?
Contact support
Top
You are looking at an outdated 7.8.0 version of this document. Switch to the 8.4.0 version to see the up to date information.

class anychart.graphics.vector.Stage Improve this Doc

This class provide tools for cross-browser display with the single interface for both (SVG and VML). Do not invoke constructor directly. Use anychart.graphics#create.

Note:
anychart.graphics.vector.Stage delegates all work with DOM elements, style and attributes to its renderer. You can get renderer using getRenderer method.
Note: Renderer is a singleton must not contain own fields.

Rendering:
anychart.graphics.vector.Stage has the rootLayer_ private field of Layer type. All layers and elements you add to a stage go there, so rendering and other stuff happens when this layer is rendered.

Methods Overview

Miscellaneous
addChild()Adds element.
addChildAt()Adds element by index.
appendTransformationMatrix()Combines current transformation with another. Combination is done by
circle()Invokes anychart.graphics.vector.Circle constructor.
clip()Clips a stage.
container()Returns DOM element where everything is drawn upon rendering.
createClip()Creates a clip element using single value.
data()Deserializes JSON object - objects are created and rendered to the stage.
domElement()Returns stage root DOM element.
ellipse()Invokes anychart.graphics.vector.Ellipse constructor.
forEachChild()Applies function to all children.
getBounds()Returns bounds.
getChildAt()Returns element by index.
getCoordinate()Returns coordinates of top left corner.
getRotationAngle()Returns rotation angle in degrees.
getSize()Returns size.
getStage()Returns self. We need this method to sync layer and stage api.
getTransformationMatrix()Returns current transformation matrix: [
getX()Returns X of top left corner.
getY()Returns Y of top left corner.
hasChild()Similar to anychart.graphics.vector.Layer#hasChild
hatchFill()Invokes anychart.graphics.vector.HatchFillconstructor, if there is no such hatchfill in defs. If it already exist - returns an instance.
height()If opt_value defined then it will be set as stage height else returns current stage height.
html()Invokes anychart.graphics.vector.Text and applies anychart.graphics.vector.Text#htmlText to parse HTML.
id()Gets stage identifier. If it was not set, than it will be generated.
image()Invokes anychart.graphics.vector.Image constructor.
indexOfChild()Returns index of a child.
isRendering()Indicates if stage is in rendering process.
isSuspended()Returns rendering state (true - suspended, false - instant
layer()Invokes anychart.graphics.vector.Layer constructor.
listen()Adds an event listener to a stage.
listenOnce()Adds an event listener to a stage
numChildren()Similar to anychart.graphics.vector.Layer#numChildren
parent()Returns self. We need this method to sync layer and stage api.
path()Invokes anychart.graphics.vector.Path constructor.
pattern()Invokes anychart.graphics.vector.PatternFill constructor.
print()Print stage.
rect()Invokes anychart.graphics.vector.Rect constructor.
remove()Removes everything.
removeAllListeners()Removes all listeners from an object. You can also optionally remove listeners of some particular type.
removeChild()Removes element.
removeChildAt()Removes element by index.
removeChildren()Removes all elements.
resize()Stage resize. Anything drawn on stage must fit in it
resume()Removes Suspend state and applies all changes in sync (if any).
resumeAsync()Removes Suspend state and applies all changes in async (if any).
rotate()Rotates root layer.
rotateByAnchor()Rotates root layer around an anchor.
saveAsJpg()Saves the current stage as JPG Image.
saveAsPdf()Saves the current stage as PDF Document.
saveAsPng()Saves the current stage as PNG Image.
saveAsSvg()Saves the stage as SVG Image.
scale()Scales root layer in parent coordinates system. Scaling center is set in the parent system too.
scaleByAnchor()Scales root layer in parent coordinates system. Scaling center is set
setPosition()Sets top left corner coordinates of root layer (with transformation,
setRotation()Rotates root layer around a point.
setRotationByAnchor()Rotates root layer around an anchor.
setTransformationMatrix()Sets transformation matrix.
suspend()Suspends rendering (changes instant to suspended).
swapChildren()Swaps two children.
swapChildrenAt()Swaps two children.
text()Invokes anychart.graphics.vector.Text constructor.
toSvg()Returns SVG string if type of content SVG with parameters otherwise returns empty string.
translate()Moves root layer taking transformation into account.
unlisten()Removes a listener added with listen() or listenOnce() methods.
unlistenByKey()Removes an event listener which was added with listen() by the key returned by listen() or listenOnce().
visible()Returns stage visibility.
width()If opt_value defined then it will be set as stage width else returns current stage width.

Methods Description

addChild

Params:

NameTypeDescription
elementanychart.graphics.vector.ElementElement.

Returns:

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

addChildAt

Adds element by index.
Similar to anychart.graphics.vector.Layer#addChildAt

Params:

NameTypeDescription
elementanychart.graphics.vector.ElementElement.
indexnumberChild index.

Returns:

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

appendTransformationMatrix

Combines current transformation with another. Combination is done by multiplying matrix to the right.
Read more at: anychart.graphics.vector.Element#appendTransformationMatrix.

Params:

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

Returns:

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

circle

Invokes anychart.graphics.vector.Circle constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at: anychart.graphics.vector.Circle

Params:

NameTypeDescription
cxnumberCenter X, in pixels.
cynumberCenter Y, in pixels.
radiusnumberRadius, in pixels.

Returns:

anychart.graphics.vector.Circle - An instance of class for method chaining.

clip

Clips a stage. Works only after render() is invoked.
Read more at: anychart.graphics.vector.Element#clip.

Params:

NameTypeDescription
valueanychart.graphics.math.RectClipping rectangle.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining. or anychart.graphics.math#rect clipping rectangle.
Get clip bounds. Works only after render() is invoked.
Read more at: anychart.graphics.vector.Element#clip.

Returns:

anychart.graphics.math.Rect - Clipping rectangle.

container

Returns DOM element where everything is drawn upon rendering.

Returns:

Element - Returns DOM element of graphics container.
Sets DOM element where everything is drawn upon rendering. If method is invoked after rendering and new container is set then upon next draw DOM element will move to the new container.

Params:

NameTypeDescription
valueElementContainer DOM element.

Returns:

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

createClip

Creates a clip element using single value.

Params:

NameTypeDescription
rectArray.<number> | anychart.graphics.math.Rect | Object | nullRect or array or object representing bounds.

Returns:

anychart.graphics.vector.Clip - Clip element.
Creates a clip element using several value.

Params:

NameTypeDescription
leftnumberLeft coordinate of bounds.
topnumberTop coordinate.
widthnumberWidth of the rect.
heightnumberHeight of the rect.

Returns:

anychart.graphics.vector.Clip - Clip element.

data

Returns Stage JSON. Serializes stage and all its object in JSON.

Returns:

Object - JSON data of stage.
Deserialize JSON - objects are created and rendered to the current stage.
Note: All seetings except events and handlers are serialized. JSON object must be conformed with JSON schema (can be found in the project root). No checks are done when we deserialize - JSON schema does this. JSON schema is created in 4-th version of standard JSON schema.

Params:

NameTypeDescription
valueObjectJSON data to set for stage.

Returns:

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

domElement

Returns stage root DOM element.

Returns:

Element - Stage root DOM element.

ellipse

Invokes anychart.graphics.vector.Ellipse constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at: anychart.graphics.vector.Ellipse

Params:

NameTypeDescription
cxnumberCenter X, in pixels.
cynumberCenter Y, in pixels.
rxnumberX radius, in pixels.
rynumberY raduis, in pixels.

Returns:

anychart.graphics.vector.Ellipse - An instance of class for method chaining.

forEachChild

Applies function to all children. Similar to anychart.graphics.vector.Layer#forEachChild

Params:

NameTypeDescription
callbackfunctionCallback.
thisObjectThis element.

Returns:

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

getBounds

Returns bounds.

Returns:

anychart.graphics.math.Rect - Bounds.

getChildAt

Returns element by index.
Similar to anychart.graphics.vector.Layer#getChildAt

Params:

NameTypeDescription
indexnumberChild index.

Returns:

anychart.graphics.vector.Element - Element or null.

getCoordinate

Returns coordinates of top left corner.

Returns:

anychart.graphics.math.Coordinate - Coordinates of top left corner.

getRotationAngle

Returns rotation angle in degrees.
Read more at: anychart.graphics.vector.Element#getRotationAngle.

Returns:

number - Rotation angle.

getSize

Returns size.

getStage

Returns self. We need this method to sync layer and stage api.

Returns:

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

getTransformationMatrix

Returns current transformation matrix: [ {number} m00 Scale X. {number} m10 Shear Y. {number} m01 Shear X. {number} m11 Scale Y. {number} m02 Translate X. {number} m12 Translate Y. ]
Read more at: anychart.graphics.vector.Element#getTransformationMatrix.

Returns:

Array.<number> - Transformation matrix.

getX

Returns X of top left corner.

Returns:

number - X of top left corner.

getY

Returns Y of top left corner.

Returns:

number - Y of top left corner.

hasChild

Params:

NameTypeDescription
elementanychart.graphics.vector.ElementElement to check.

Returns:

boolean - Is there such element in stage or not.

hatchFill

Invokes anychart.graphics.vector.HatchFill constructor, if there is no such hatchfill in defs. If it already exist - returns an instance.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at: anychart.graphics.vector.HatchFill

Params:

NameTypeDescription
typeanychart.graphics.vector.HatchFill.HatchFillTypeType of hatch fill.
colorstringHatch color COMBINED WITH OPACITY.
thicknessnumberHatch fill thickness.
sizenumberHatch fill size.

Returns:

anychart.graphics.vector.HatchFill - An instance of class for method chaining.

height

If opt_value defined then it will be set as stage height else returns current stage height. Stage height can be defined as pixel or percent value.

Params:

NameTypeDescription
valuestring | numberHeight of stage.

Returns:

number | anychart.graphics.vector.Stage - Height of stage.

html

Invokes anychart.graphics.vector.Text and applies anychart.graphics.vector.Text#htmlText method to parse HTML.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Params:

NameTypeDescription
this{anychart.graphics.vector.Layer|anychart.graphics.vector.Stage}This param
xnumberX-coordinate (Left) of left top corner of text bounds.
ynumberY-coordinate (Top) of left top corner of text bounds.
textstringText.
styleanychart.graphics.vector.TextStyleText style. Read more at anychart.graphics.vector.Text#style.

Returns:

anychart.graphics.vector.Text - An instance of class for method chaining.

id

Gets stage identifier. If it was not set, than it will be generated.

Returns:

string - Returns element identifier.
Sets stage identifier and instantly applies it to DOM.

Params:

NameTypeDescription
valuestringCustom identifier.

Returns:

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

image

Invokes anychart.graphics.vector.Image constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Params:

NameTypeDescription
srcstringIRI (Internationalized Resource Identifiers) for image source.
xnumberX coordinate of left-top corner image.
ynumberY coordinate of left-top corner image.
widthnumberWidth of image bounds.
heightnumberHeight of image bounds.

Returns:

anychart.graphics.vector.Image - Image object instance.

indexOfChild

Returns index of a child. Similar to anychart.graphics.vector.Layer#indexOfChild

Params:

NameTypeDescription
elementanychart.graphics.vector.ElementElement.

Returns:

number - Index or -1.

isRendering

Indicates if stage is in rendering process.

Returns:

boolean - State of rendering process.

isSuspended

Returns rendering state (true - suspended, false - instant

Returns:

boolean - Rendering state.

layer

Invokes anychart.graphics.vector.Layer constructor
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Params:

NameTypeDescription
this{anychart.graphics.vector.Layer|anychart.graphics.vector.Stage}This param

Returns:

anychart.graphics.vector.Layer - An instance of class for method chaining.

listen

Adds an event listener to a stage.

Params:

NameTypeDescription
typestringThe event type id.
listenerfunctionCallback method.
useCapturebooleanWhether to fire in capture phase (defaults to false).
listenerScopeSCOPEObject in whose scope to call the listener.

Returns:

Object - Unique key for the listener.

listenOnce

Adds an event listener to a stage

Params:

NameTypeDescription
typestringThe event type id.
listenerfunctionCallback method.
useCapturebooleanWhether to fire in capture phase (defaults to false).
listenerScopeSCOPEObject in whose scope to call the listener.

Returns:

Object - Unique key for the listener.

numChildren

Returns:

number - Number of stage children.

parent

Returns self. We need this method to sync layer and stage api.

Returns:

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

path

Invokes anychart.graphics.vector.Path constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at Path: anychart.graphics.vector.Path

Returns:

anychart.graphics.vector.Path - An instance of class for method chaining.

pattern

Invokes anychart.graphics.vector.PatternFill.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at: anychart.graphics.vector.PatternFill

Params:

NameTypeDescription
boundsanychart.graphics.math.RectBounds of pattern. Defines size and offset of pattern.

Returns:

anychart.graphics.vector.PatternFill - An instance of class for method chaining.

print

Print stage.

Params:

NameTypeDescription
paperSizeanychart.graphics.vector.PaperSize
landscapeboolean

rect

Invokes anychart.graphics.vector.Rect constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Params:

NameTypeDescription
xnumberX (Left) coordinate of top-left corner.
ynumberY (Top) coordinate of top-left corner.
widthnumberWidth.
heightnumberHeight.

Returns:

anychart.graphics.vector.Rect - An instance of class for method chaining.

remove

Removes everything.

Returns:

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

removeAllListeners

Removes all listeners from an object. You can also optionally remove listeners of some particular type.

Params:

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

Returns:

number - Number of listeners removed.

removeChild

Removes element.
Similar to anychart.graphics.vector.Layer#removeChild

Params:

NameTypeDescription
elementanychart.graphics.vector.ElementElement.

Returns:

anychart.graphics.vector.Element - Removed element.

removeChildAt

Removes element by index.
Similar to anychart.graphics.vector.Layer#removeChildAt

Params:

NameTypeDescription
indexnumberIndex.

Returns:

anychart.graphics.vector.Element - Removed element.

removeChildren

Removes all elements.
Similar to anychart.graphics.vector.Layer#removeChildren

Returns:

Array.<anychart.graphics.vector.Element> - Array of removed elements.

resize

Stage resize. Anything drawn on stage must fit in it So any part that doesn't fit will be clipped.

Params:

NameTypeDescription
widthnumber | stringWidth.
heightnumber | stringHeight.

resume

Removes Suspend state and applies all changes in sync (if any).
Read more at anychart.graphics.vector.Stage#suspend.

resumeAsync

Removes Suspend state and applies all changes in async (if any).
Read more at anychart.graphics.vector.Stage#suspend.
Async rendering must be used when you have a lot of data because it gives a better user experience and allows to render other. elements on the page. The only disadvantage is its speed.

rotate

Rotates root layer.
Read more at: anychart.graphics.vector.Element#rotate.

Params:

NameTypeDescription
degreesnumberRotation angle.
cxnumberRotaion X.
cynumberRotaion Y.

Returns:

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

rotateByAnchor

Rotates root layer around an anchor.
Read more at: anychart.graphics.vector.Element#rotateByAnchor.

Params:

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

Returns:

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

saveAsJpg

Saves the current stage as JPG Image.
For export to image JPG use anychart#server.

Params:

NameTypeDescription
widthnumberImage width.
heightnumberImage height.
qualitynumberImage quality in ratio 0-1.
forceTransparentWhitebooleanDefine, should we force transparent to white background.

saveAsPdf

Saves the current stage as PDF Document.
For export to PDF file use anychart#server.

Params:

NameTypeDescription
paperSizestringAny paper format like "a0", "tabloid", "b4", etc.
landscapebooleanDefine, is landscape.
xnumberOffset X.
ynumberOffset Y.

saveAsPng

Saves the current stage as PNG Image.
For export to image PNG use anychart#server.

Params:

NameTypeDescription
widthnumberImage width.
heightnumberImage height.
qualitynumberImage quality in ratio 0-1.

saveAsSvg

Saves the stage as SVG Image.
For export to SVG use anychart#server.

Params:

NameTypeDescription
paperSizestringPaper Size.
landscapebooleanLandscape.
Saves the stage as SVG Image using width and height.
For export to SVG use anychart#server.

Params:

NameTypeDescription
widthnumberImage width.
heightnumberImage height.

scale

Scales root layer in parent coordinates system. Scaling center is set in the parent system too.
Read more at: anychart.graphics.vector.Element#scale.

Params:

NameTypeDescription
sxnumberScale Х.
synumberScale Y.
cxnumberScale center Х.
cynumberScale center Y.

Returns:

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

scaleByAnchor

Scales root layer in parent coordinates system. Scaling center is set by root layer anchor.
Read more at: anychart.graphics.vector.Element#scaleByAnchor.

Params:

NameTypeDescription
sxnumberScale Х.
synumberScale Y.
anchoranychart.graphics.vector.Anchor | stringScaling center anchor.

Returns:

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

setPosition

Sets top left corner coordinates of root layer (with transformation, in parent coordinate system).
Read more at: anychart.graphics.vector.Element#setPosition.

Params:

NameTypeDescription
xnumberX of top left corner.
ynumberY of top left corner.

Returns:

anychart.graphics.vector.Stage - Returns self for chaining.

setRotation

Rotates root layer around a point.
Read more at: anychart.graphics.vector.Element#setRotation.

Params:

NameTypeDescription
degreesnumberRotation angle.
cxnumberRotaion Х.
cynumberRotaion Y.

Returns:

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

setRotationByAnchor

Rotates root layer around an anchor.
Read more at: anychart.graphics.vector.Element#setRotationByAnchor.

Params:

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

Returns:

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

setTransformationMatrix

Sets transformation matrix.
Read more at: anychart.graphics.vector.Element#setTransformationMatrix.

Params:

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

Returns:

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

suspend

Suspends rendering (changes instant to suspended).
When Stage is in this state changes do not affect DOM.
To wake Stage up from this state you need to invoke anychart.graphics.vector.Stage#resume or anychart.graphics.vector.Stage#resumeAsync.
Suspended rendering is much faster than instant, when there are a lot of operations with Stage.

swapChildren

Swaps two children. Similar to anychart.graphics.vector.Layer#swapChildren

Params:

NameTypeDescription
element1anychart.graphics.vector.ElementFirst child.
element2anychart.graphics.vector.ElementSecond child.

Returns:

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

swapChildrenAt

Swaps two children. Similar to anychart.graphics.vector.Layer#swapChildrenAt

Params:

NameTypeDescription
index1numberFirst child or id.
index2numberSecond child or id.

Returns:

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

text

Invokes anychart.graphics.vector.Text constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Params:

NameTypeDescription
this{anychart.graphics.vector.Layer|anychart.graphics.vector.Stage}This param
xnumberX-coordinate (Left) of left top corner of text bounds.
ynumberY-coordinate (Top) of left top corner of text bounds.
textstringText.
styleanychart.graphics.vector.TextStyleText style. Read more at anychart.graphics.vector.Text#style.

Returns:

anychart.graphics.vector.Text - An instance of class for method chaining.

toSvg

Returns SVG string if type of content SVG with parameters otherwise returns empty string.

Params:

NameTypeDescription
paperSizestringPaper Size.
landscapebooleanLandscape.

Returns:

string - SVG content or empty string.
Returns SVG string if type of content SVG with determined the width and height otherwise returns empty string.

Params:

NameTypeDescription
widthnumberImage width.
heightnumberImage height.

Returns:

string - SVG content or empty string.

translate

Moves root layer taking transformation into account. Movement happens in root layer coordinates.
Read more at: anychart.graphics.vector.Element#translate.

Params:

NameTypeDescription
txnumberХ offset.
tynumberY offset.

Returns:

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

unlisten

Removes a listener added with listen() or listenOnce() methods.

Params:

NameTypeDescription
typestringThe event type id.
listenerfunctionCallback method.
useCapturebooleanWhether to fire in capture phase (defaults to false).
listenerScopeSCOPEObject in whose scope to call the listener.

Returns:

boolean - Whether any listener was removed.

unlistenByKey

Removes an event listener which was added with listen() by the key returned by listen() or listenOnce().

Params:

NameTypeDescription
keyObjectThe key returned by listen() or listenOnce().

Returns:

boolean - Whether any listener was removed.

visible

Returns stage visibility.

Returns:

boolean - Visibility.
Shows or hides stage.

Params:

NameTypeDescription
isVisiblebooleanVisibility.

Returns:

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

width

If opt_value defined then it will be set as stage width else returns current stage width. Stage width can be defined as pixel or percent value.

Params:

NameTypeDescription
valuestring | numberWidth of stage.

Returns:

number | anychart.graphics.vector.Stage - Width of stage.