Background and Borders

Overview
Border
Fill

Solid Fill
Gradient Fill

Fills and Borders Sample
Corners
Inside Margins
Margins and Corners Sample

Overview

A lot of chart element in AnyChart Stock Component has background, which consists of fill, border, corner shape settings and inside margins settings. Some elements has only fill and border, but the configuration is similar.

This document describes all available background configuration options.

Border Settings

Border is configured using <border> node. Table below lists available attributes:

Attribute	Type	Description
enabled	Boolean	Sets whether the border is drawn or not.
color	Color	Sets border color.
opacity	Number (0 to 1)	Sets color opacity.
thickness	Number	Sets border thickness.

Typical solid border settings look like:

XML/JSON Syntax

XML Code
JSON Code

`01`	`<border` `enabled="true"` `thickness="1"` `color="Black"` `opacity="0.5"` `/>`

01{
02  enabled: true,
03  thickness: 1,
04  color: "Black",
05  opacity: 0.5
06}

Fill Settings

With AnyChart you it is possible to color background with a solid color, or with a gradient transition. Fill is configured in the <fill> node and depending on the type it has different settings.

Table below lists and describes attributes of <fill> node:

Attribute	Type	Description
enabled	Boolean	Sets whether the file is drawn or not.
type	Enum: Solid Gradient	Sets fill type.
color	Color	Sets fill color (in Solid mode).
opacity	Number (0 to 1)	Sets fill opacity.

Solid Fill

When fill type is set to "Solid", background is filled with one color and you can control this color opacity. Colors can be defined with any of the methods described in Color tutorial. Typical solid fill settings are:

XML/JSON Syntax

XML Code
JSON Code

`01`	`<fill` `type="Solid"` `color="RoyalBlue"` `opacity="0.5"` `/>`

01{
02  type: "Solid",
03  color: "RoyalBlue",
04  opacity: 0.5
05}

Gradient Fill

AnyChart allows to create Gradient fills for any background. To create gradient fill you need to set type="Gradient" and configure gradient settings in <gradient> sub-node.

There are two types of gradient fills - "Linear" and "Radial"

Typical gradient border settings look like:

XML/JSON Syntax

XML Code
JSON Code

    
            01
            <fill enabled="true" type="Gradient">
        
            02
              <gradient type="Linear">
        
            03
                <keys>
        
            04
                  <key position="0" color="Green" opacity="0.5" />
        
            05
                  <key position="1" color="Blue" opacity="1" />
        
            06
                </keys>
        
            07
              </gradient>
        
            08
            </fill>

01{
02  enabled: true,
03  type: "Gradient",
04  gradient: {
05    type: "Linear",
06    keys: [
07      {
08        position: 0,
09        color: "Green",
10        opacity: 0.5
11      },
12      {
13        position: 1,
14        color: "Blue",
15        opacity: 1
16      }
17    ]
18  }
19}

Fills and Borders Sample

Sample below shows how different background settings look like using custom labels:

Live Sample: Background Fills and Borders Settings

Corners

You can adjust the shape of borders corners, there are 4 types for corners: "Square", "Rounded", "Cut" and "RoundedInner". Appearance of these types is shown on the image below:

For "Rounded", "Cut" and "RoundedInner" types you can control not only a shape, but also a radius of "rounding" or "cutting" for all corners, or given corners.

Typical settings for "rounding" all corners are:

XML/JSON Syntax

XML Code
JSON Code

`01`	`<corners` `type="Rounded"` `all="10"` `/>`

01{
02  type: "Rounded",
03  all: 10
04}

To set only left top corner shape to "Cut" type settings like this should be used:

XML/JSON Syntax

XML Code
JSON Code

`01`	`<corners` `type="Cut"` `all="0"` `left_top="10"` `/>`

01{
02  type: "Cut",
03  all: 0,
04  leftTop: 10
05}

Inside margins

If you want to increase or decrease the spaces between border and background content (texts, chart, etc.) you can do that setting inside margins. Margins are measured in pixels. Every side margin can be set individually, "all" attribute is used to set them all together. Note that every individual settings override "all" value.

Typical settings for inside margins are:

XML/JSON Syntax

XML Code
JSON Code

`01`	`<inside_margin` `left="5"` `top="5"` `right="5"` `bottom="5"` `all="10"` `/>`

01{
02  left: 5,
03  top: 5,
04  right: 5,
05  bottom: 5,
06  all: 10
07}

Margins and Corners Sample

Live Sample Below shows two axis markers with different margins and corner shapes:

Live Sample: Background Corners and Margins Settings