Legend: General Settings

Overview
Turning On /Off
Background and Border
Margins
Padding

Overview

This article contains all general legend settings. You will learn how to turn the legend on and off, configure its background and border. This article also contains information about legend margins configuration.

Turning On / Off

By default the legend is turned on for each chart, but you can always turn it off, if it isn't necessary.

To turn legend off for the given chart use this XML:

XML/JSON Syntax

XML Code
JSON Code

    
            01
            <chart>
        
            02
              <legend enabled="false" />
        
            03
            </chart>

01{
02  legend: {
03    enabled: false
04  }
05}

Live sample of the chart without the legend on the main chart:

Live Sample: Legend Enable and Disable

Background and Border

Legend background and border is fully configurable, as most of the other chart elements. By default the background has the gradient fill and light gray border - you can set your own colors or turn both of these elements off.

Sample XML for tuning background:

XML/JSON Syntax

XML Code
JSON Code

    
            01
            <chart>
        
            02
              <legend>
        
            03
                <background enabled="true">
        
            04
                  <fill type="Solid" color="#F8D6D6" opacity="1" />
        
            05
                  <border color="#B88D8D" thickness="1" opacity="1" />
        
            06
                  <corners type="Cut" left_top="6" />
        
            07
                </background>
        
            08
              </legend>
        
            09
            </chart>

01{
02  legend: {
03    background: {
04      enabled: true,
05      fill: {
06        type: "Solid",
07        color: "#F8D6D6",
08        opacity: 1
09      },
10      border: {
11        color: "#B88D8D",
12        thickness: 1,
13        opacity: 1
14      },
15      corners: {
16        type: "Cut",
17        leftTop: 6
18      }
19    }
20  }
21}

Live sample below shows how settings given above work:

Live Sample: Legend Background Settings

This section shows only a part of XML available to tune background. You can find more in the relevant sections of XML Reference.

Margins

To set margins in legend please use the following XML:

XML/JSON Syntax

XML Code
JSON Code

    
            01
            <chart>
        
            02
              <legend>
        
            03
                <inside_margin left="25" right="20" top="20" bottom="20" />
        
            04
              </legend>
        
            05
            </chart>

01{
02  legend: {
03    insideMargin: {
04      left: 25,
05      right: 20,
06      top: 20,
07      bottom: 20
08    }
09  }
10}

Live sample below shows the legend with modified margins. Note that left and right margins squeeze the content of the legend and legend has less space for elements:

Live Sample: Legend Inside Margins Settings

Padding

You can also set padding - the distance between the chart and the legend, illustration below shows what padding are we talking about:

By default the padding is set to zero. XML below shows how to change it:

XML/JSON Syntax

XML Code
JSON Code

    
            01
            <chart>
        
            02
              <legend padding="10" />
        
            03
            </chart>

01{
02  legend: {
03    padding: 10
04  }
05}

The size of the padding is set in pixels using padding attribute in <legend> node.

Live sample below shows chart with legend, with padding is set:

Live Sample: Legend Padding Settings