Still have questions?
Contact support



Scroller is a main navigational control AnyStock provides to a chart viewer to make chart comprehension process comfortable and easy.

Scroller is a complex component that consists of the several configurable parts: Scroller itself, optional thumbnail series in its background and thumbs.

Note: this is a Scroller for Stock charts, basic charts have their own basic scroller with slightly different settings.

The scroller is enabled by default, it is possible to enable/disable the scroller by passing the "true" or "false" value to the scroller() method or enabled() method:

// turn scroller on

// turn it off

JsFiddle Playground


In Stock charts the position of the scroller cannot be changed, as well as its orientation, as its function is to scroll the time (X) axis.

There are several basic methods to configure the scroller:

// adjust the scroller
chart.scroller().fill('green 0.1');
chart.scroller().selectedFill('green 0.5');

JsFiddle Playground

Background Series

Scroller can display one of the supported series in the background. It is done pretty much like creating a series in a plot:

// create scroller series with mapped data

JsFiddle Playground

Visit Supported series article to know more about series supported by AnyStock Charts.

Scroller Axis

Stock scroller has an extra X axis inside, it can be disabled or configured using the xAxis() method:

// disable the scroller axis

JsFiddle Playground

To adjust the labels of the scroller axis work with it like with any other axis in Stock Charts.

// access labels
labels = chart.scroller().xAxis().labels();
minorLabels = chart.scroller().xAxis().minorLabels();

// set major labels text format
labels.format(function() {
  return "'" + anychart.format.dateTime(this.tickValue, "yy");
// set labels color

// set minor labels text format
  return anychart.format.dateTime(this.tickValue, 'MMM, d');

// set minor labels font 

JsFiddle Playground


You can handle scroller events using event listeners (find out more about them in Event Listeners article).

There are 4 events that can be handled when the selected time range changes. These events can be used to handle user actions, e.g. to display a chosen time interval as text or to update any extra UI elements.

Events that can be listened by a chart:

  • selectedrangebeforechange - dispatches before user changes the selected range of the scroller
  • selectedrangechangestart - dispatches when user starts changing a scroller, on mouseDown event
  • selectedrangechange - dispatches when user changes a scroller somehow, on mouseMove event
  • selectedrangechangefinish - dispatches when user releases the mouse button and finishes the scroller change, on mouseUp event

Here is a sample listener:

// events
chart.listen("selectedrangechangestart", function(e){
    chart.title("The selected range is: " + anychart.format.dateTime(e.firstSelected, 'dd MMM yyyy') + " - " + anychart.format.dateTime(e.lastSelected, 'dd MMM yyyy'));

Here is a live sample:

JsFiddle Playground