Important version information!

You are browsing a class reference for Version 2 of the JavaScript Charts. If you are using Version 3 (current), please click here.

ChartCursor

ChartCursor is a class which displays a cursor which follows the mouse. In case of Serial chart it also shows value and category balloons.

Example of how cursor is added to the chart:

var chart = new AmCharts.AmSerialChart();
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);

Properties

PropertyTypeDefaultDescription
bulletsEnabledBooleanfalseSpecifies if bullet for each graph will follow the cursor.
bulletSizeNumber8Size of bullets, following the cursor.
categoryBalloonAlphaNumber1Opacity of the category balloon.
categoryBalloonColorString Color of the category balloon. cursorColor is used if not set.
categoryBalloonDateFormatStringMMM DD, YYYYCategory balloon date format (used only if category axis parses dates). Check this page for instructions on how to format dates.
categoryBalloonEnabledBooleantrueSpecifies whether category balloon is enabled.
categoryBalloonFunctionFunctionAllows formatting any category balloon text you want. categoryBalloonFunction should return a string which will be displayed in a balloon. When categoryBalloonFunction is called, category value (or date) is passed as an argument.
colorString#FFFFFFText color.
cursorAlphaNumber1Opacity of the cursor line.
cursorColorString#CC0000Color of the cursor line.
cursorPositionString Specifies where the cursor line should be placed - on the beginning of the period (day, hour, etc) or in the middle (only when parseDates property of categoryAxis is set to true). If you want the cursor to follow mouse and not to glue to the nearest data point, set "mouse" here. Possible values are: "start", "middle", "mouse".
enabledBooleantrueSpecifies whether cursor is enabled.
oneBalloonOnlyBooleanfalseIf this is set to true, only one balloon at a time will be displayed. Note, this is quite CPU consuming.
panBooleanfalseIf this is set to true, the user will be able to pan the chart (Serial only) instead of zooming.
selectionAlphaNumber Opacity of the selection.
selectWithoutZoomingBooleanfalseSpecifies if cursor should only mark selected area but not zoom-in after user releases mouse button.
valueBalloonsEnabledBooleantrueSpecifies whether value balloons are enabled. In case they are not, the balloons might be displayed anyway, when the user rolls-over the column or bullet.
zoomableBooleantrueSpecifies if the user can zoom-in the chart. If pan is set to true, zoomable is switched to false automatically.
zoomingBoolean Indicates if currently user is selecting some chart area to zoom-in.

Methods

NameParametersReturnsDescription
addListener(type, handler)type - string like 'changed' (should be listed in 'events' section of this class or classes which extend this class). handler - function which is called when event happensAdds event listener to the object.
hideCursor() Hides cursor.
removeListener(obj, type, handler) Removes event listener from the object.
showCursorAt(category)You can force cursor to appear at specified cateogry or date.

Events

NameEvent objectDescription
changed{type:"changed", index:Number, zooming:Boolean, mostCloseGraph:AmGraph, chart:AmChart }Dispatched when cursor position is changed. "index" is a series index over which chart cursors currently is. "zooming" specifies if user is currently zooming (is selecting) the chart. mostCloseGraph property is set only when oneBalloonOnly is set to true.
onHideCursor{type:"onHideCursor", chart:AmChart}Dispatched when cursor is hidden.
selected{type:"changed", index:Number, zooming:Boolean, chart:AmChart}Dispatched if selectWithoutZooming is set to true and when user selects some period. start and end are indices or time stamp (when categoryAxis.parseDates is true) of selection start/end.
zoomed{type:"changed", index:Number, zooming:Boolean, chart:AmChart}Dispatched when user zooms to some period. start and end are indices or time stamp (when categoryAxis.parseDates is true) of selection start/end.