Chart Layout

Overview

This section describes the options and settings for chart layout, alignment and dimensions.

to top

Outside Margins

Outside margins define the space between the plotting area and the border od the Flash movie. These margins are set in pixels; they remain permanent until explicitly changed.

The space defined by the outside margins is colored in Flash movie background settings, defined using JavaScript API or HTML embed code.

Here is a sample XML for defining outside margins:

XML/JSON Syntax
Plain 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     <outside_margin left="50" top="50" right="50" bottom="50" />
05   </settings>
06 </stock>
01{
02  settings: {
03    outsideMargin: {
04      left: 50,
05      top: 50,
06      right: 50,
07      bottom: 50
08    }
09  }
10}

The live sample below shows a chart with all outside margins set to 50 pixels. To make the margins visible, the background is made pink, and all the white space around it shows the outside margins. Also note the value axis labels - they are placed on the uncolored place, to avoid such situations please use inside margins.

Live Sample:  Layout - Using Outside Margins

to top

Inside Margins

Inside margins define the space required for elements around a chart, such as Custom Labels or Axes Labels.

Here is a sample XML for defining inside margins:

XML/JSON Syntax
Plain 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     <inside_margin left="50" top="50" right="50" bottom="50" />
05   </settings>
06 </stock>
01{
02  settings: {
03    insideMargin: {
04      left: 50,
05      top: 50,
06      right: 50,
07      bottom: 50
08    }
09  }
10}

This live sample shows that the chart background takes almost the entire space of the movie, while the chart itself is squeezed. Note the value axis labels - they are now placed on the colored background:

Live Sample:  Layout - Using Inside Margins

to top

Paddings

For each chart you can set top and bottom paddings. These paddings can be useful when you define custom labels.

Here is a sample XML for setting paddings:

XML/JSON Syntax
Plain code
01 <chart top_padding="20" bottom_padding="10" />
01{
02  topPadding: 20,
03  bottomPadding: 10
04}

The live sample below demonstrates the settings given above:

Live Sample:  Layout - Chart Paddings

to top

Chart Height

AnyChart Stock is capable of showing several charts with the same argument one above the other. By default, if several charts are shown - they all have the same height, but you can change this.

You can't set the height for each chart explicitly, for all the charts occupy the space dynamically, with reference to margins, paddings and scroller height.

The height of each chart is defined by the height attribute of <chart> node; for example, <chart height="5">, where height is weight number of its height related to another charts. The ratio between the charts' heights remains unchanged no matter how the size of the embedded movie varies.

Here is a sample XML for defining chart heights:

XML/JSON Syntax
Plain code
01 <settings>
02   <charts>
03     <chart height="100">
04       <series_list>
05         <series type="Line" data_provider="dp1" color="#DC3912">
06           <name><![CDATA[MSFT]]></name>
07         </series>
08       </series_list>
09     </chart>
10     <chart height="30">
11       <series_list>
12         <series type="Line" data_provider="dp1" color="#DC3912">
13           <name><![CDATA[MSFT]]></name>
14         </series>
15       </series_list>
16     </chart>
17   </charts>
18 </settings>
01{
02  charts: [
03    {
04      height: 100,
05      seriesList: [
06        {
07          type: "Line",
08          dataProvider: "dp1",
09          color: "#DC3912",
10          name: "MSFT"
11        }
12      ]
13    },
14    {
15      height: 30,
16      seriesList: [
17        {
18          type: "Line",
19          dataProvider: "dp1",
20          color: "#DC3912",
21          name: "MSFT"
22        }
23      ]
24    }
25  ]
26}

The live sample below shows two charts: the first one has the height property set to 100, and the second one - to 30; as the result, the second chart takes less space:

Live Sample:  Layout - Chart Height

 

to top