ChartScrollbar

Type class

Create a scrollbar for AmSerialChart and AmXYChart charts.

Example

```js var chart = AmCharts.makeChart("chartdiv",{ ... "pathToImages": "http://cdn.amcharts.com/lib/3/images/", // required for grips "chartScrollbar": { "updateOnReleaseOnly": true } });```

Sources

This information about ChartScrollbar is provided for reference only and is not available through exported packages and thus should not be imported or used on its own.

Inheritance

ChartScrollbar does not extend any other symbol.

ChartScrollbar is not extended by any other symbol.

Properties

#accessibleLabel

Type stringDefault Zoom chart using cursor arrows

Text which screen readers will read if user rolls-over or sets focus using tab key (this is possible only if tabIndex property of AmGraph is set to some number) on the grips or draggable part of a scrollbar. Text is added as aria-label tag. Note - not all screen readers and browsers support this. Note, you should set tabIndex to some number in order it would be possible to zoom chart using cursor keys.

#autoGridCount

Type booleanDefault false

Specifies whether number of gridCount is specified automatically, according to the axis size.

#backgroundAlpha

Type numberDefault 1

Background opacity.

#backgroundColor

Type colorDefault #D4D4D4

Background color of the scrollbar.

#color

Type colorDefault #FFFFFF

Text color.

#dragCursorDown

Type stringDefault cursor: move; cursor: grab; cursor: -moz-grabbing; cursor: -webkit-grabbing;

Mouse cursor displayed when clicked on selected part of a scrollbar.

#dragCursorHover

Type stringDefault cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;

Mouse cursor displayed when hovering over selected part of a scrollbar.

#dragIcon

Type stringDefault dragIconRoundBig

File name of scrollbar drag (resize grip) icon. You can find a set of icons in amcharts/images folder - you can choose from these: dragIconRectBig, dragIconRectBigBlack, dragIconRectSmall, dragIconRectSmallBlack, dragIconRoundBig, dragIconRoundBigBlack, dragIconRoundSmall, dragIconRoundSmallBlack. You can also use your own custom icons. Don't forget to change dragIconWidth and dragIconHeight if you change icons.

#dragIconHeight

Type numberDefault 35

Height of resize grip image. Note, you should also update the image in amcharts/images folder if you don't want it to be distorted because of resizing.

#dragIconWidth

Type numberDefault 35

Width of resize grip image. Note, you should also update the image in amcharts/images folder if you don't want it to be distorted because of resizing.

#enabled

Type booleanDefault true

Specifies if scrollbar is enabled. You can hide/show scrollbar using this property without actually removing it.

#graphFillAlpha

Type numberDefault 1

Graph fill opacity. Value range is 0 - 1.

#graphFillColor

Type colorDefault #BBBBBB

Graph fill color.

#graphLineAlpha

Type numberDefault 0

Graph line opacity. Value range is 0 - 1.

#graphLineColor

Type colorDefault #BBBBBB

Graph line color.

#graphType

Type string

by default the graph type is the same as the original graph's type, however in case of candlestick or ohlc you might want to show line graph in the scrollbar. Possible values are: line, column, step, smoothedLine, candlestick, ohlc

#gridAlpha

Type numberDefault 0.7

Grid opacity. Value range is 0 - 1.

#gridColor

Type colorDefault #FFFFFF

Grid color.

#gridCount

Type numberDefault 0

The number of grid lines.

#hideResizeGrips

Type booleanDefault false

Specifies whether resize grips are hidden when mouse is away from the scrollbar.

#hResizeCursor

Type stringDefault ew-resize

Mouse cursor type shown when user hovers horizontal cursor's resize grips.

#hResizeCursorDown

Type string

CSS value of cursor displayed when mouse is pressed down over horizontal cursor's resize grip.

#hResizeCursorHover

Type string

CSS value of cursor displayed when hovering over horizontal cursor's resize grip.

#ignoreCustomColors

Type booleanDefault false

If you have column type graph in your scrollbar, and this graph has custom colors for one or more columns in data provider, those columns will be colored with this custom color. However you might not want this in some cases. Set this property to true to use scrollbar's graph colors.

#maximum

Type number

Maximum value of ValueAxis of ChartScrollbar. Calculated automatically, if not set.

#minimum

Type number

Minimum value of ValueAxis of ChartScrollbar. Calculated automatically, if not set.

#offset

Type numberDefault 0

Distance from plot area to scrollbar, in pixels.

#oppositeAxis

Type booleanDefault true

By default, scrollbar is in the opsite side of plot area from the axis. If you set this property to false, scrollbar will be placed next to category/value axis. However it won't adjust it's position regarding axis labels, so you might need to use offset property to move scrollbar away from labels.

#resizeEnabled

Type booleanDefault true

If set to false it will prevent the chart scroll bar to change selection scope. The grip images will not be shown as well. The user would still be able to pan / move selection.

#scrollbarHeight

Type numberDefault 20

Height (width, if chart is rotated) of a scrollbar.

#scrollDuration

Type numberDefault 1

Duration of scrolling, when the user clicks on scrollbar's background, in seconds. Note, updateOnReleaseOnly should be set to false in order animation to happen.

#selectedBackgroundAlpha

Type numberDefault 1

Selected backround opacity.

#selectedBackgroundColor

Type colorDefault #EFEFEF

Selected background color.

#selectedGraphFillAlpha

Type numberDefault 1

Selected graph's fill opacity. Value range is 0 - 1.

#selectedGraphFillColor

Type colorDefault #888888

Selected graph's fill color.

#selectedGraphLineAlpha

Type numberDefault 0

Selected graph's line opacity. Value range is 0 - 1.

#selectedGraphLineColor

Type colorDefault #888888

Selected graph's line color.

#tabIndex

Type number

In case you set it to some number, the chart will set focus on grips and draggable area of the scrollbar when user clicks tab key. When a focus is set, screen readers like NVDA Screen reader will read label which is set using accessibleLabel property of ChartScrollbar. When a focus is set user can zoom-in, zoom-out or pan the scrollbar using cursor keys. Note, not all browsers and readers support this.

#updateOnReleaseOnly

Type booleanDefault false

Specifies if the chart should be updated while dragging/resizing the scrollbar or only at the moment when user releases mouse button.

#vResizeCursor

Type stringDefault ns-resize

Mouse cursor type shown when user hovers vertical cursor's resize grips.

#vResizeCursorDown

Type string

CSS value of cursor displayed when mouse is pressed down over vertical cursor's resize grip.

#vResizeCursorHover

Type string

CSS value of cursor displayed when hovering over vertical cursor's resize grip.

Methods

ChartScrollbar does not have any methods.

Events

ChartScrollbar does not have any events.