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

Specific settings
cornerType()	Corner type.
corners()	Corner radius.
disablePointerEvents()	Pointer events settings.
Coloring
bottomStroke()	Bottom stroke settings.
fill()	Fill settings.
leftStroke()	Left stroke settings.
rightStroke()	Right stroke settings.
stroke()	Stroke settings.
topStroke()	Top stroke settings.
Interactivity
enabled()	Element state (enabled or disabled).
Size and Position
bottom()	Bottom bound settings.
bounds()	Bounds settings.
getPixelBounds()	Returns pixel bounds.
height()	Height settings.
left()	Left bound settings.
maxHeight()	Maximum height.
maxWidth()	Maximum width.
minHeight()	Minimum height.
minWidth()	Minimum width.
right()	Right bound settings.
top()	Top bound settings.
width()	Width settings.
zIndex()	Z-index of the element.

Methods Description

bottom

bottom()

Getter for element bottom bound settings.

Returns:

number | string | undefined - Element's bottom bound setting.

bottom(bottom)

Setter for element bottom bound settings.

Params:

Name	Type	Default	Description
bottom	number \| string \| null	null	Bottom bound settings for the element.

Returns:

anychart.core.ui.Background - Returns self for method chaining.

Try it:

Usage sample

bottomStroke

bottomStroke()

Getter for the bottom stroke.

Returns:

anychart.graphics.vector.Stroke - Returns bottom stroke.

See listing

var bottomStroke = background.bottomStroke();

bottomStroke(color)

Setter for bottom stroke settings using one parameter.

Detailed description

Accepts:

String formatted as '[thickness ]color[ opacity]':
1. 'color' - https://www.w3schools.com/html/html_colors.asp.
2. 'thickness color' - like a css border, e.g. '3 red' or '3px red'
3. 'color opacity' - as a fill string, e.g. '#fff 0.5'
4. 'thickness color opacity' - as a complex string, e.g. '3px #00ff00 0.5'
anychart.graphics.vector.Stroke object
anychart.graphics.vector.GradientKey keys array
null resets current stroke settings

Note: String parts order is significant and '3px red' is not the same as 'red 3px'.

Params:

Name	Type	Default	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string \| null \| Object	'none'	Stroke formatted as '[thickness ]color[ opacity]'.

Returns:

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

Try it:

bottomStroke(color, thickness, dashpattern, lineJoin, lineCap)

Setter for bottom stroke settings.

Detailed description

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:

Name	Type	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string	Stroke settings.
thickness	number	Line thickness. Defaults to 1 of not set.
dashpattern	string	Controls 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'.
lineJoin	string \| anychart.graphics.vector.StrokeLineJoin	Line join style.
lineCap	string \| anychart.graphics.vector.StrokeLineCap	Line cap style.

Returns:

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

Try it:

Usage sample

bounds

bounds()

Getter for element bounds settings.

Returns:

anychart.core.utils.Bounds - Bounds of the element.

bounds(bounds)

Setter for bounds of the element using one parameter.

Params:

Name	Type	Description
bounds	anychart.utils.RectObj \| anychart.math.Rect \| anychart.core.utils.Bounds	Bounds of element.

Returns:

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

Try it:

Usage sample

bounds(x, y, width, height)

Setter for element bounds settings.

Params:

Name	Type	Default	Description
x	number \| string	null	X-coordinate.
y	number \| string	null	Y-coordinate.
width	number \| string	null	Width.
height	number \| string	null	Height.

Returns:

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

Try it:

Usage sample

cornerType

cornerType()

Getter for the corner type.

Returns:

anychart.enums.BackgroundCornersType | string - Corners type.

Try it:

Usage sample

cornerType(type)

Setter for the corner type.

Detailed description

Note: Set corner radius anychart.core.ui.Background#corners to display a corners shape. If a radius set to 0, no effect will be applied.

Params:

Name	Type	Default	Description
type	anychart.enums.BackgroundCornersType \| string	'round'	Value to set.

Returns:

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

Try it:

Usage sample

corners

corners()

Getter for the corner radius.

Returns:

Array.<number> - Corner settings.

Try it:

Usage sample

corners(corners)

Setter for the corner radius by one value.

Detailed description

Note: If array has less than 4 elements(or string provide less than 4 values), the first value is set for all four corners.

Params:

Name	Type	Default	Description
corners	number \| string \| Array.<number>	0	Value to set.

Returns:

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

Try it:

corners(topLeft, topRight, bottomRight, bottomLeft)

Setter for the corner radius by each value.

Params:

Name	Type	Description
topLeft	number \| string	Top left corner value.
topRight	number \| string	Top right corner value.
bottomRight	number \| string	Bottom left corner value.
bottomLeft	number \| string	Bottom right corner value.

Returns:

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

Try it:

Usage sample

disablePointerEvents

disablePointerEvents()

Getter for the pointer events settings.

Returns:

boolean - The pointer events settings.

See listing

var names = background.names();
var disablePointerEvents = names.disablePointerEvents();

disablePointerEvents(enabled)

Setter for the pointer events setting.

Params:

Name	Type	Default	Description
enabled	boolean	false	Value to set.

Returns:

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

enabled

enabled()

Getter for the element state (enabled or disabled).

Returns:

boolean - Element state.

See listing

var enabled = background.enabled();

enabled(enabled)

Setter for the element enabled state.

Params:

Name	Type	Default	Description
enabled	boolean	true	Enabled state to set.

Returns:

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

Example.

if (!element.enabled())
   element.enabled(true);

Try it:

Usage sample

fill

fill()

Getter for the background fill.

Returns:

anychart.graphics.vector.Fill - Fill settings (empty fill is always 'none').

Try it:

Usage sample

fill(color)

Setter for fill settings using an object, an array or a string.
Accepts:

or a color as a string, along with opacity, if needed, format is "Color Opacity", e.g. "red 0.5".

Params:

Name	Type	Description
color	anychart.graphics.vector.Fill \| Array.<(anychart.graphics.vector.GradientKey\|string)>	Fill as an object, an array or a string.

Returns:

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

Try it:

fill(color, opacity)

Fill as a color with opacity.

Detailed description

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:

Name	Type	Default	Description
color	string	"#fff"	Fill as a string.
opacity	number		Fill opacity.

Returns:

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

Try it:

Usage sample

fill(keys, angle, mode, opacity)

Linear gradient fill.

Detailed description

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.

Description: a) ObjectBoundingBox no angle preservation.
b) ObjectBoundingBox preserving an angle.
c) UserSpaceOnUse.
d) Three step gradients.

Params:

Name	Type	Description
keys	Array.<(anychart.graphics.vector.GradientKey\|string)>	Gradient keys.
angle	number	Gradient angle.
mode	boolean \| anychart.graphics.vector.Rect \| Object	Gradient mode.
opacity	number	Gradient opacity.

Returns:

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

Try it:

Usage sample

fill(keys, cx, cy, mode, opacity, fx, fy)

Radial gradient fill.

Params:

Name	Type	Description
keys	Array.<(anychart.graphics.vector.GradientKey\|string)>	Color-stop gradient keys.
cx	number	X ratio of center radial gradient.
cy	number	Y ratio of center radial gradient.
mode	anychart.graphics.math.Rect	If defined then userSpaceOnUse mode, else objectBoundingBox.
opacity	number	Opacity of the gradient.
fx	number	X ratio of focal point.
fy	number	Y ratio of focal point.

Returns:

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

Try it:

Usage sample

getPixelBounds

getPixelBounds()

Returns pixel bounds of the element due to parent bounds and self bounds settings.

Returns:

anychart.math.Rect - Pixel bounds of the element.

height

height()

Getter for element height settings.

Returns:

number | string | undefined - Element's height setting.

height(height)

Setter for element height setting.

Params:

Name	Type	Default	Description
height	number \| string \| null	null	Height settings for the element.

Returns:

anychart.core.ui.Background - Returns self for method chaining.

Try it:

Usage sample

left

left()

Getter for element left bound settings.

Returns:

number | string | undefined - Element's left bound setting.

left(left)

Setter for element left bound settings.

Params:

Name	Type	Default	Description
left	number \| string \| null	null	Left bound setting for the element.

Returns:

anychart.core.ui.Background - Returns self for method chaining.

Try it:

Usage sample

leftStroke

leftStroke()

Getter for the left stroke.

Returns:

anychart.graphics.vector.Stroke - Returns left stroke.

See listing

var leftStroke = background.leftStroke();

leftStroke(color)

Setter for left stroke settings using one parameter.

Detailed description

Accepts:

String formatted as '[thickness ]color[ opacity]':
1. 'color' - https://www.w3schools.com/html/html_colors.asp.
2. 'thickness color' - like a css border, e.g. '3 red' or '3px red'
3. 'color opacity' - as a fill string, e.g. '#fff 0.5'
4. 'thickness color opacity' - as a complex string, e.g. '3px #00ff00 0.5'
anychart.graphics.vector.Stroke object
anychart.graphics.vector.GradientKey keys array
null resets current stroke settings

Note: String parts order is significant and '3px red' is not the same as 'red 3px'.

Params:

Name	Type	Default	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string \| null \| Object	'none'	Stroke formatted as '[thickness ]color[ opacity]'.

Returns:

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

Try it:

leftStroke(color, thickness, dashpattern, lineJoin, lineCap)

Setter for left stroke settings.

Detailed description

Params:

Name	Type	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string	Stroke settings.
thickness	number	Line thickness. Defaults to 1 of not set.
dashpattern	string	Controls 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'.
lineJoin	string \| anychart.graphics.vector.StrokeLineJoin	Line join style.
lineCap	string \| anychart.graphics.vector.StrokeLineCap	Line cap style.

Returns:

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

Try it:

Usage sample

maxHeight

maxHeight()

Getter for the maximum height.

Returns:

number | string | null - Element's maximum height.

maxHeight(height)

Setter for the maximum height.

Params:

Name	Type	Default	Description
height	number \| string \| null	null	Maximum height to set.

Returns:

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

Try it:

Usage sample

maxWidth

maxWidth()

Getter for the maximum width.

Returns:

number | string | null - Element's maximum width.

maxWidth(width)

Setter for the maximum width.

Params:

Name	Type	Default	Description
width	number \| string \| null	null	Maximum width to set.

Returns:

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

Try it:

Usage sample

minHeight

minHeight()

Getter for the minimum height.

Returns:

number | string | null - Element's minimum height.

minHeight(height)

Setter for the minimum height.

Detailed description

The method sets a minimum height of elements, that will be to remain after a resize of element.

Params:

Name	Type	Default	Description
height	number \| string \| null	null	Minimum height to set.

Returns:

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

Try it:

Usage sample

minWidth

minWidth()

Getter for the minimum width.

Returns:

number | string | null - Element's minimum width.

minWidth(width)

Setter for the minimum width.

Detailed description

The method sets a minimum width of elements, that will be to remain after a resize of element.

Params:

Name	Type	Default	Description
width	number \| string \| null	null	Minimum width to set.

Returns:

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

Try it:

Usage sample

right

right()

Getter for element right bound settings.

Returns:

number | string | undefined - Element's right bound setting.

right(right)

Setter for element right bound setting.

Params:

Name	Type	Default	Description
right	number \| string \| null	null	Right bound setting for the element.

Returns:

anychart.core.ui.Background - Returns self for method chaining.

Try it:

Usage sample

rightStroke

rightStroke()

Getter for the right stroke.

Returns:

anychart.graphics.vector.Stroke - Returns right stroke.

See listing

var rightStroke = background.rightStroke();

rightStroke(color)

Setter for right stroke settings using one parameter.

Detailed description

Accepts:

String formatted as '[thickness ]color[ opacity]':
1. 'color' - https://www.w3schools.com/html/html_colors.asp.
2. 'thickness color' - like a css border, e.g. '3 red' or '3px red'
3. 'color opacity' - as a fill string, e.g. '#fff 0.5'
4. 'thickness color opacity' - as a complex string, e.g. '3px #00ff00 0.5'
anychart.graphics.vector.Stroke object
anychart.graphics.vector.GradientKey keys array
null resets current stroke settings

Note: String parts order is significant and "3px red" is not the same as "red 3px".

Params:

Name	Type	Default	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string \| null \| Object	'none'	Stroke formatted as '[thickness ]color[ opacity]'.

Returns:

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

Try it:

rightStroke(color, thickness, dashpattern, lineJoin, lineCap)

Setter for right stroke settings.

Detailed description

Params:

Name	Type	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string	Stroke settings.
thickness	number	Line thickness. Defaults to 1 of not set.
dashpattern	string	Controls 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'.
lineJoin	string \| anychart.graphics.vector.StrokeLineJoin	Line join style.
lineCap	string \| anychart.graphics.vector.StrokeLineCap	Line cap style.

Returns:

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

Try it:

Usage sample

stroke

stroke()

Getter for the background stroke.

Returns:

anychart.graphics.vector.Stroke - Returns stroke.

Try it:

Usage sample

stroke(color)

Setter for stroke settings using one parameter.

Detailed description

Accepts:

String formatted as '[thickness ]color[ opacity]':
1. 'color' - https://www.w3schools.com/html/html_colors.asp.
2. 'thickness color' - like a css border, e.g. '3 red' or '3px red'
3. 'color opacity' - as a fill string, e.g. '#fff 0.5'
4. 'thickness color opacity' - as a complex string, e.g. '3px #00ff00 0.5'
anychart.graphics.vector.Stroke object
anychart.graphics.vector.GradientKey keys array
null resets current stroke settings

Note: String parts order is significant and "3px red" is not the same as "red 3px".

Params:

Name	Type	Default	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string \| null \| Object	'none'	Stroke formatted as '[thickness ]color[ opacity]'.

Returns:

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

Try it:

stroke(color, thickness, dashpattern, lineJoin, lineCap)

Setter for stroke settings.

Detailed description

Params:

Name	Type	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string	Stroke settings.
thickness	number	Line thickness. Defaults to 1 of not set.
dashpattern	string	Controls 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'.
lineJoin	string \| anychart.graphics.vector.StrokeLineJoin	Line join style.
lineCap	string \| anychart.graphics.vector.StrokeLineCap	Line cap style.

Returns:

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

Try it:

Usage sample

top

top()

Getter for element top bound settings.

Returns:

number | string | undefined - Element's top bound setting.

top(top)

Setter for element top bound settings.

Params:

Name	Type	Default	Description
top	number \| string \| null	null	Top bound setting for the element.

Returns:

anychart.core.ui.Background - Returns self for method chaining.

Try it:

Usage sample

topStroke

topStroke()

Getter for the top stroke.

Returns:

anychart.graphics.vector.Stroke - Returns top stroke.

See listing

var topStroke = background.topStroke();

topStroke(color)

Setter for top stroke settings using one parameter.

Detailed description

Accepts:

String formatted as '[thickness ]color[ opacity]':
1. 'color' - https://www.w3schools.com/html/html_colors.asp.
2. 'thickness color' - like a css border, e.g. '3 red' or '3px red'
3. 'color opacity' - as a fill string, e.g. '#fff 0.5'
4. 'thickness color opacity' - as a complex string, e.g. '3px #00ff00 0.5'
anychart.graphics.vector.Stroke object
anychart.graphics.vector.GradientKey keys array
null resets current stroke settings

Note: String parts order is significant and '3px red' is not the same as 'red 3px'.

Params:

Name	Type	Default	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string \| null \| Object	'none'	Stroke formatted as '[thickness ]color[ opacity]'.

Returns:

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

Try it:

topStroke(color, thickness, dashpattern, lineJoin, lineCap)

Setter for top stroke settings.

Detailed description

Params:

Name	Type	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string	Stroke settings.
thickness	number	Line thickness. Defaults to 1 of not set.
dashpattern	string	Controls 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'.
lineJoin	string \| anychart.graphics.vector.StrokeLineJoin	Line join style.
lineCap	string \| anychart.graphics.vector.StrokeLineCap	Line cap style.