Range Selector General Settings

Overview

This tutorial describes general settings of Range Selector Panel such as positioning, paddings, layout and disabling panel.

to top

Enable/Disable

By default Range Selector Panel is disabled. To enable it use these settings:

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     <range_selector enabled="true" />
05   </settings>
06 </stock>
01{
02  settings: {
03    rangeSelector: {
04      enabled: true
05    }
06  }
07}

Sample Chart with Range Selector Panel:

Live Sample:  Range Selector Enable and Disable

to top

Positioning

Panel can be placed either above (Top position) all charts or under (Bottom) all charts and scroller. This can be set using position attribute, which can set "Top" or "Bottom".

Sample XML:

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     <range_selector enabled="true" position="Top" />
05   </settings>
06 </stock>
01{
02  settings: {
03    rangeSelector: {
04      enabled: true,
05      position: "Top"
06    }
07  }
08}

Sample chart with panel placed above the charts:

Live Sample:  Range Selector - Positioning Settings

to top

Padding

You can define the padding between the charts and the panel using padding attribute. The padding is specified in pixels.

Sample XML:

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     <range_selector enabled="true" padding="80" />
05   </settings>
06 </stock>
01{
02  settings: {
03    rangeSelector: {
04      enabled: true,
05      padding: 80
06    }
07  }
08}

Live sample of the chart with paddings set to 80px:

Live Sample:  Range Selector - Padding Settings

to top

Alignment and ordering of the Elements

Range Selector consists of Range Picker and Presets sub panels. Each of them can be aligned and you can swap them on the panel.

Sample XML of alignment and ordering of elements:

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     <range_selector enabled="true" position="Top" items_spacing="30">
05       <range_picker ordering_index="2" align="Center" />
06       <presets ordering_index="1" align="Center" />
07     </range_selector>
08   </settings>
09 </stock>
01{
02  settings: {
03    rangeSelector: {
04      enabled: true,
05      position: "Top",
06      itemsSpacing: 30,
07      rangePicker: {
08        orderingIndex: 2,
09        align: "Center"
10      },
11      presets: {
12        orderingIndex: 1,
13        align: "Center"
14      }
15    }
16  }
17}

As you can see align attribute is used to set alignment, and ordering_index attribute to define the order of elements on the panel (left to right). Also, there is an items_spacing attribute, which defines the space (in pixels) between Range Picker and Presets (in case they have the same horizontal alignment).

Live Sample with such settings:

Live Sample:  Range Selector - Items Ordering

to top