Top
You are looking at an outdated 7.1.1 version of this document. Switch to the 7.14.3 version to see the up to date information.

class anychart.elements.Background Improve this Doc

Extends: anychart.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.

Try it:

Methods Overview

Miscellaneous
cornerType()Getter for current corner type.
corners()Getter for current corner radius.
draw()Render background.
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:

Name Type Default Description
value anychart.enums.BackgroundCornersType
anychart.enums.BackgroundCornersType.ROUND
Value to set.

Returns:

anychart.elements.Background - anychart.elements.Background instance for method chaining.

Try it:

corners

Getter for current corner radius.

Returns:

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

Params:

Name Type Default Description
value number | 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.elements.Background - anychart.elements.Background instance for method chaining.
Setter for 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.elements.Background - anychart.elements.Background instance for method chaining.

Try it:

draw

Render background.

Returns:

anychart.elements.Background - anychart.elements.Background 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:

Name Type Default Description
value anychart.graphics.vector.Fill
'#000 0.5'
Fill as an object or a string.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape 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:

Name Type Description
color string Fill as a string.
opacity number Fill opacity.

Returns:

anychart.elements.Background - anychart.elements.Background instance for method chaining.

Try it:

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:

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.elements.Background - anychart.elements.Background instance for method chaining.
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.elements.Background - anychart.elements.Background instance for method chaining.

Try it:

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:

Name Type Default Description
value anychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | string | null
'#000'
Fill formatted as '[thickness ]color[ opacity]'.

Returns:

anychart.elements.Background - anychart.elements.Background class 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:

Name Type Description
value anychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | string Fill 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 anychart.graphics.vector.StrokeLineJoin Line join style.
lineCap anychart.graphics.vector.StrokeLineCap Line cap style.

Returns:

anychart.elements.Background - anychart.elements.Background instance for method chaining.

Try it: