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

class anychart.core.ui.Background Improve this Doc

Extends: anychart.core.VisualBaseWithBounds

Background element class.
Background can be a part of another complex element (chart, legend, title and so on), or used separately.
Background has a fill, a border and corner shape settings.
Note: Always specify display bounds if you use Background separately.

Methods Overview

Miscellaneous
cornerType()Getter for current corner type.
corners()Getter for current corner radius.
fill()Sets fill settings using an object or a string.
stroke()Sets stroke settings using one parameter.

Methods Description

cornerType

Getter for current corner type.

Returns:

anychart.enums.BackgroundCornersType - Corners type.
Setter for corner type.

Params:

NameTypeDefaultDescription
valueanychart.enums.BackgroundCornersType
anychart.enums.BackgroundCornersType.ROUND
Value to set.

Returns:

anychart.core.ui.Background - Self instance for method chaining.

corners

Getter for current corner radius.

Returns:

Array.<number> - Current corner settings.
topLeft, topRight, bottomRight, bottomLeft Setter for corner's radius by one value.

Params:

NameTypeDefaultDescription
valuenumber | string | Array.<number>
'0px'
Value to set.
Note: If array has less than 4 elements (or string provide less than 4 values), the first value is set for all four corners.

Returns:

anychart.core.ui.Background - Self instance for method chaining.
Setter for corner radius by each value.

Params:

NameTypeDescription
topLeftnumber | stringTop left corner value.
topRightnumber | stringTop right corner value.
bottomRightnumber | stringBottom left corner value.
bottomLeftnumber | stringBottom right corner value.

Returns:

anychart.core.ui.Background - Self instance for method chaining.

fill

Returns current fill.

Returns:

anychart.graphics.vector.Fill - Current fill settings (empty fill is always 'none').
Sets fill settings using an object or a string.
Accepts: or a color as a string, along with opacity, if needed, format is 'Color Opacity', e.g. 'red .5'.

Params:

NameTypeDefaultDescription
valueanychart.graphics.vector.Fill
'#000 0.5'
Fill as an object or a string.

Returns:

anychart.core.ui.Background - Self instance for method chaining.
Fill as a color with opacity.
Note: If color is set as a string (e.g. 'red .5') it has a priority over opt_opacity, which means: fill set like this rect.fill('red 0.3', 0.7) will have 0.3 opacity.

Params:

NameTypeDescription
colorstringFill as a string.
opacitynumberFill opacity.

Returns:

anychart.core.ui.Background - Self instance for method chaining.
Linear gradient fill.
There are three modes:
  • ObjectBoundingBox preserving an angle
  • ObjectBoundingBox no angle preservation
  • UserSpaceOnUse

Modes:

ObjectBoundingBox preserving an angle
If boolean is passed it says how gradient behaves, specificaly how gradient line angle behaves. If true - it is ObjectBoundingBox with angle preservation. If angle is preserved, in any shape angle looks as one expects it to see.
Note: By default gradient vector for any shape, which sides are not in 1:1 proportions, will not look as expected, because browser transforms this angle.

ObjectBoundingBox no angle preservation
If false is passed - that's ObjectBoundingBox no angle preservation. In this case default behaviour comes up - gradient vector is calculated for a shape with 1:1 side proportions.

UserSpaceOnUse
If anychart.graphics.math.Rect is passed - that'sUserSpaceOnUse mode. In this mode gradient gets its own size and coordinates. Shapes with such gradient will be colored only in those parts, which are covered by this custom gradient. Read more about this mode at gradientUnits. Angle is always preserved in this mode.

Params:

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

Returns:

anychart.core.ui.Background - 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.core.ui.Background - Self instance for method chaining.

stroke

Returns current stroke.

Returns:

anychart.graphics.vector.Stroke - Returns current stroke.
Sets stroke settings using one parameter.
Accepts: Note: String parts order is significant and '3px red' is not the same as 'red 3px'.

Params:

NameTypeDefaultDescription
valueanychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | string | null
'#000'
Fill formatted as '[thickness ]color[ opacity]'.

Returns:

anychart.core.ui.Background - Self 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 priority. E.g. setting shape.stroke('10 red', 5); (or shape.stroke({color: 'red', thickness: 10}, 5); will result in a red stroke with thickness 10px.

Params:

NameTypeDescription
valueanychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | stringFill settings.
thicknessnumberLine thickness. Defaults to 1 of not set.
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.core.ui.Background - Self instance for method chaining.