Range Selector Overview

Range Selector Panel is a part of AnyChart Stock Component to make navigation though the large chart even more easy. The panel consists of two parts:

Range Picker - two text fields that allow user specify manually the period to view. Developer can tune the template for data input so it matches user preferences.
Presets Panel - set of predefined buttons bound to the selected range or some special ranges. When user clicks these buttons component shows it on the chart.

Illustration below highlights these elements:

Range Selector Panel works for all charts at once, all its settings are done in <range_selector> node. XML below shows where this node should be placed and subnodes it has:

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
                <range_selector>
        
            05
                  <range_picker />
        
            06
                  <presets />
        
            07
                </range_selector>
        
            08
              </settings>
        
            09
            </stock>

01{
02  settings: {
03    rangeSelector: {
04      rangePicker: {},
05      presets: {}
06    }
07  }
08}

To learn more how to configure Range Selector see: