Scroller Visual Settings

Border and Selected Range Outline

You can change the look and the scroller border and selected range outline. Illustration below shows what are they:

Sample XML of Border and Selected Range Outline 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     <scroller>
05       <border color="Red" thickness="1" />
06       <selected_range_outline color="Blue" thickness="1" />
07     </scroller>
08   </settings>
09 </stock>
01{
02  settings: {
03    scroller: {
04      border: {
05        color: "Red",
06        thickness: 1
07      },
08      selectedRangeOutline: {
09        color: "Blue",
10        thickness: 1
11      }
12    }
13  }
14}

Live sample with such settings:

Live Sample:  Scroller - Outline and Border Settings

To learn more about the configuration of elements mentioned above see XML Reference.

to top

Scroller Chart Series and Background

If scroller has the Data Provider and it has a small chart of Area type in the background you can configure this series look. There are two blocks of configuration of this series and its background:

Each block has following settings:

Illustration below highlights these elements. All highlighted elements can be tuned individually:

Sample XML with series and background 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     <scroller>
05       <inside_selected_range>
06         <background_fill type="Solid" color="#FFFFFF" />
07         <series_line enabled="true" color="#C21700" thickness="1" opacity="1" />
08         <series_fill enabled="true" type="Solid" color="#C21700" opacity="0.1" />
09       </inside_selected_range>
10       <outside_selected_range>
11         <background_fill type="Solid" color="#E5E5E5" />
12         <series_line enabled="true" color="#C21700" thickness="1" opacity="0.5" />
13         <series_fill enabled="true" type="Solid" color="#C21700" opacity="0.05" />
14       </outside_selected_range>
15     </scroller>
16   </settings>
17 </stock>
01{
02  settings: {
03    scroller: {
04      insideSelectedRange: {
05        backgroundFill: {
06          type: "Solid",
07          color: "#FFFFFF"
08        },
09        seriesLine: {
10          enabled: true,
11          color: "#C21700",
12          thickness: 1,
13          opacity: 1
14        },
15        seriesFill: {
16          enabled: true,
17          type: "Solid",
18          color: "#C21700",
19          opacity: 0.1
20        }
21      },
22      outsideSelectedRange: {
23        backgroundFill: {
24          type: "Solid",
25          color: "#E5E5E5"
26        },
27        seriesLine: {
28          enabled: true,
29          color: "#C21700",
30          thickness: 1,
31          opacity: 0.5
32        },
33        seriesFill: {
34          enabled: true,
35          type: "Solid",
36          color: "#C21700",
37          opacity: 0.05
38        }
39      }
40    }
41  }
42}

Live sample of such settings :

Live Sample:  Scroller - Series Settings

To learn more about the configuration of elements mentioned above see XML Reference.

to top

Range Markers

Range Markers are markers used to change the selected range, here they are:

All settings of the Range Markers are done in <range_markers> node:

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     <scroller>
05       <range_markers />
06     </scroller>
07   </settings>
08 </stock>
01{
02  settings: {
03    scroller: {
04      rangeMarkers: {}
05    }
06  }
07}

The table below lists possible settings:

Attribute Possible Values Description
enabled true
false		 Disables/Enables markers. At the same time disabling markers disallow user to change the start and end of the selected range. Default: "true".
shape Circle
Diamond
Thumb		 Sets marker shape . Default: "Thumb".
size Any Number Sets width and height of the markers in pixels. Works only when types is Circle or Diamond. Default: 10px.
show_always true
false		 Defines whether marker are always shown or only when mouse hovers selected range. The default is false.

As it was already said shape attribute define marker outlook. Table below shows the types:

Shape
Circle
Diamond
Thumb

Also you can change how markers of Circle and Diamond types look like using <fill> and <border> nodes.

Sample XML with marker 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     <scroller>
05       <range_markers enabled="true" shape="Diamond" size="12" show_always="true">
06         <fill enabled="true" type="Gradient" color="#2551A4" opacity="1">
07           <gradient angle="45">
08             <keys>
09               <key color="#5F77A4" />
10               <key color="#2551A4" />
11             </keys>
12           </gradient>
13         </fill>
14         <border enabled="true" color="White" thickness="1" />
15       </range_markers>
16     </scroller>
17   </settings>
18 </stock>
01{
02  settings: {
03    scroller: {
04      rangeMarkers: {
05        enabled: true,
06        shape: "Diamond",
07        size: 12,
08        showAlways: true,
09        fill: {
10          enabled: true,
11          type: "Gradient",
12          color: "#2551A4",
13          opacity: 1,
14          gradient: {
15            angle: 45,
16            keys: [
17              {
18                color: "#5F77A4"
19              },
20              {
21                color: "#2551A4"
22              }
23            ]
24          }
25        },
26        border: {
27          enabled: true,
28          color: "White",
29          thickness: 1
30        }
31      }
32    }
33  }
34}

Live sample with such settings :

Live Sample:  Scroller - Range Markers Settings

Learn more about <fill> and <border> nodes in Background Tutorial or in XML Reference.

to top