Scroller Labels and Grid Settings

Overview

The scale in Scroller is pretty similar to the scale in the chart, but it shows all time scale at once and doesn't have some minor features.

to top

Maximum labels limit

Just as for the chart scale you can define the maximum number of ticks with labels. By default scroller shows no more than ten labels, but you can change this value as you wish.

Sample XML to set the limit:

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       <time_scale max_ticks_count="3" />
06     </scroller>
07   </settings>
08 </stock>
01{
02  settings: {
03    scroller: {
04      timeScale: {
05        maxTicksCount: 3
06      }
07    }
08  }
09}

Live sample where scroller shows no more than three labels:

Live Sample:  Scroller - Limiting Number of Labels

to top

Labels Settings

You can configure either the format of the and how they look like and where they are placed.

Positioning

You can place labels on the top, in the center or at the bottom of the scroller and define relative paddings

Sample XML for changing the position:

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       <time_scale>
06         <labels position="Bottom" x_padding="4" y_padding="2" />
07       </time_scale>
08     </scroller>
09   </settings>
10 </stock>
01{
02  settings: {
03    scroller: {
04      timeScale: {
05        labels: {
06          position: "Bottom",
07          xPadding: 4,
08          yPadding: 2
09        }
10      }
11    }
12  }
13}

Live sample with such settings:

Live Sample:  Scroller - Labels Positioning

to top

Font Settings

Typical <font> node described in Font tutorial, allows you to change the look of the labels. Sample XML follows:

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       <time_scale>
06         <labels>
07           <font family="Verdana" size="9" color="DarkRed" bold="true" />
08         </labels>
09       </time_scale>
10     </scroller>
11   </settings>
12 </stock>
01{
02  settings: {
03    scroller: {
04      timeScale: {
05        labels: {
06          font: {
07            family: "Verdana",
08            size: 9,
09            color: "DarkRed",
10            bold: true
11          }
12        }
13      }
14    }
15  }
16}

Live sample of such settings:

Live Sample:  Scroller - Labels Font Settings

to top

Background

You can change the background of the labels if you need to make them more readable. This can be done using typical <background> node described in Background and Borders article.

Sample XML with 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 enabled="true">
05       <time_scale>
06         <labels>
07           <background>
08             <fill type="Gradient">
09               <gradient angle="90">
10                 <keys>
11                   <key color="#FEFEFE" />
12                   <key color="#F5F1F1" />
13                 </keys>
14               </gradient>
15             </fill>
16             <border color="#BDBDBD" />
17             <corners type="Rounded" all="4" />
18             <inside_margin left="2" top="0" right="2" bottom="0" />
19           </background>
20         </labels>
21       </time_scale>
22     </scroller>
23   </settings>
24 </stock>
01{
02  settings: {
03    scroller: {
04      enabled: true,
05      timeScale: {
06        labels: {
07          background: {
08            fill: {
09              type: "Gradient",
10              gradient: {
11                angle: 90,
12                keys: [
13                  {
14                    color: "#FEFEFE"
15                  },
16                  {
17                    color: "#F5F1F1"
18                  }
19                ]
20              }
21            },
22            border: {
23              color: "#BDBDBD"
24            },
25            corners: {
26              type: "Rounded",
27              all: 4
28            },
29            insideMargin: {
30              left: 2,
31              top: 0,
32              right: 2,
33              bottom: 0
34            }
35          }
36        }
37      }
38    }
39  }
40}

Live sample with such settings:

Live Sample:  Scroller - Label Background Settings

to top

Labels Intervals

Just as for the general Timescale, scroller timescale has a predefined set of formats for different time intervals, but there is only one level in scroller scale, so there is only one set.

By default the component tries to display intervals in the best way, but sometimes you may need to alter them. The following list of intervals is supported:

For example if you have rather small data set with daily data fro three years - the scroller may jump to half a year mode and user will see the following: Jan, Jul, Jan, Jul, Jan, Jul - which is not good.

To solve this issue you can defined more detailed format. Sample XML of such formatting:

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       <time_scale>
06         <interval_formats>
07           <months><![CDATA[%MMM, %yyyy]]></months>
08         </interval_formats>
09       </time_scale>
10     </scroller>
11   </settings>
12 </stock>
01{
02  settings: {
03    scroller: {
04      timeScale: {
05        intervalFormats: {
06          months: "%MMM, %yyyy"
07        }
08      }
09    }
10  }
11}

Live sample if such formatting:

Live Sample:  Scroller - Changing Label Intervals

As you can see formatting uses tokens to specify date time display, you can find the list of these tokens in Date Time Formatting article.

Also you can use this formatting to localize the scale, for example XML to make scroller display date time in Chinese:

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       <time_scale>
06         <interval_formats>
07           <years><![CDATA[%yyyy年]]></years>
08           <months><![CDATA[%M月]]></months>
09           <days><![CDATA[%M月 %dd日]]></days>
10           <hours><![CDATA[%MMM-%dd %hh %tt]]></hours>
11           <minutes><![CDATA[%dd %hh:%mm]]></minutes>
12           <seconds><![CDATA[%hh:%mm:%ss]]></seconds>
13           <milliseconds><![CDATA[%hh:%mm:%ss.%sss]]></milliseconds>
14         </interval_formats>
15       </time_scale>
16     </scroller>
17   </settings>
18 </stock>
01{
02  settings: {
03    scroller: {
04      timeScale: {
05        intervalFormats: {
06          years: "%yyyy年",
07          months: "%M月",
08          days: "%M月 %dd日",
09          hours: "%MMM-%dd %hh %tt",
10          minutes: "%dd %hh:%mm",
11          seconds: "%hh:%mm:%ss",
12          milliseconds: "%hh:%mm:%ss.%sss"
13        }
14      }
15    }
16  }
17}

Live sample of such settings:

Live Sample:  Scroller - Localizing to Chinese

Learn more about intervals settings in XML Reference.

to top

Grid Lines Settings

You can configure the look of the grid lines on the scroller independently from chart axis grid lines. Sample XML of grid line 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       <grid_line enabled="true" color="Magenta" opacity="0.8" thickness="1" />
06     </scroller>
07   </settings>
08 </stock>
01{
02  settings: {
03    scroller: {
04      gridLine: {
05        enabled: true,
06        color: "Magenta",
07        opacity: 0.8,
08        thickness: 1
09      }
10    }
11  }
12}

Live sample with grid line settings:

Live Sample:  Scroller - Grid lines Settings

You can learn more about line settings in the Background and Border tutorial or in XML Reference.

to top