Chart Background

Overview
General Background
Chart Background

Overview

Among all other settings, AnyChart Stock has two special elements:

General Background - background of all charts, which surrounds all charts, labels and other elements.
Chart Background - background of a certain chart.

The illustration below gives an explanation to these elements:

General Background

General background surrounds all the elements displayable by the component: charts, labels and all others. As any other element configurable in the <background> node, it supports the customization of the filler, border, corners and paddings.

Here is a sample XML that demonstrates customizing the general background:

XML/JSON Syntax

XML Code
JSON Code

    
            01
            <?xml version="1.0" encoding="UTF-8"?>
        
            02
            <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
        
            03
              <settings>
        
            04
                <background enabled="true">
        
            05
                  <fill enabled="true" type="Gradient">
        
            06
                    <gradient angle="90">
        
            07
                      <keys>
        
            08
                        <key color="#FFFFFF" />
        
            09
                        <key color="#EEEEEE" />
        
            10
                        <key color="#FFFFFF" />
        
            11
                      </keys>
        
            12
                    </gradient>
        
            13
                  </fill>
        
            14
                  <border enabled="true" color="#2466B1" thickness="2" />
        
            15
                  <corners type="Rounded" all="10" />
        
            16
                </background>
        
            17
              </settings>
        
            18
            </stock>

01{
02  settings: {
03    background: {
04      enabled: true,
05      fill: {
06        enabled: true,
07        type: "Gradient",
08        gradient: {
09          angle: 90,
10          keys: [
11            {
12              color: "#FFFFFF"
13            },
14            {
15              color: "#EEEEEE"
16            },
17            {
18              color: "#FFFFFF"
19            }
20          ]
21        }
22      },
23      border: {
24        enabled: true,
25        color: "#2466B1",
26        thickness: 2
27      },
28      corners: {
29        type: "Rounded",
30        all: 10
31      }
32    }
33  }
34}

This live sample shows the configured background in action:

Live Sample: Chart General Background Configuration

Find out more about background configuration options in Background Settings and XML Reference.