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

class anychart.graphics.vector.Shape Improve this Doc

Extends: anychart.graphics.vector.Element

Base class for all vector elements.
Never invoke constructor directly!

Methods Overview

Miscellaneous
fill()Sets fill as object or string.
stroke()Sets stroke using one parameter.
strokeThickness()Gets stroke thickness.

Methods Description

fill

Returns fill.

Returns:

anychart.graphics.vector.Fill - Current fill (empty fill is 'none').
Sets fill as an object or a string.
Supported objects: Or a color as string. Can be combined with opacity: 'Color Opacity', 'red .5').

Params:

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

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.
Fill as string.
If color is set as string, like 'red .5', it has prioruty over opt_opacity, which means if fill is set as rect.fill('red 0.3', 0.7), opacity will be 0.3.

Params:

NameTypeDescription
colorstringColor as string.
opacitynumberOpacity.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.
Linear gradient fill.
Three modes are available:
  • ObjectBoundingBox with angle value preservation
  • ObjectBoundingBox without angle value preservation
  • UserSpaceOnUse

Modes:

ObjectBoundingBox without angle value preservation In this mode the result angle will visually correspond the original setting, non regarding browser scaling duplication (so, for objects that do not have 1:1 proportion with the original figure, the gradient angle will correspond to the initial value due to internal calculations). ObjectBoundingBox with angle value preservation In this mode, gradient vector is calculated with the preset angle, but the result gradient angle on the rendered page can be changed if the object proportion is not 1:1 in the browser. So visually the result gradient angle may not correspond to the original settings. UserSpaceOnUse In this mode gradient settings are added by gradient size and borders/coordinates, and rendering is calculated within those borders. After that, the fill is executed on the element figure according to its coordinates. More about this mode at gradientUnits.

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.Shape - anychart.graphics.vector.Shape 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.Shape - anychart.graphics.vector.Shape instance for method chaining.

stroke

Returns stroke.

Returns:

anychart.graphics.vector.Stroke - Returns stroke.
Set stroke using one parameter.
Available options: Note: String parts order is significant and '3px red' is not the same as 'red 3px'.

Params:

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

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.
Sets stroke settings.
Note: When stroke properties are set both by complex stroke object properties and by stroke() method params, object properties have more priority. E.g. setting shape.stroke('10 red', 5); (or shape.stroke({color: 'red', thickness: 10}, 5); will result a red stroke with thickness 10px.

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'.
lineJoinanychart.graphics.vector.StrokeLineJoinLine join style.
lineCapanychart.graphics.vector.StrokeLineCapLine cap style.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.

strokeThickness

Gets stroke thickness.

Returns:

number - Thickness value.
Sets stroke thickness.

Params:

NameTypeDescription
valuenumberThickness value.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.