Class: Marker

CIQ. Marker


new Marker(params)

A marker is a DOM object that is managed by the chart.

Makers are placed in containers which are div elements whose placement and size correspond with a panel on the chart. A container exists for each panel.

A marker's primary purpose is to provide additional information for a data point on the chart. As such, markers can be placed by date, tick, or bar to control their position on the x-axis, and by value (price) to control their position on the y-axis. Additional default positioning is also available, including the ability to create custom positioning logic. Once the positioning logic is established for markers, they are repositioned as needed when the user scrolls or zooms the chart.

Alternatively, a marker can also be placed at an absolute position using CSS positioning, in which case the chart does not control the marker's positioning.

The default placement function for any markers is CIQ.ChartEngine#defaultMarkerPlacement.

See the Markers tutorial for additional implementation details and information about managing performance on deployments requiring a large number of markers.

Parameters:
Name Type Description
params Object

Parameters that describe the marker.

Properties
Name Type Argument Default Description
stx CIQ.ChartEngine

The chart to which the marker is attached.

x *

A valid date, tick, or bar (depending on the selected xPositioner) used to select a candle to which the marker is associated.

y Number

A valid value for positioning the marker on the y-axis (depending on selected yPositioner). If this value is not provided, the marker is set "above_candle" as long as a valid candle is selected by params.x.

node HTMLElement <optional>

The HTML element that contains the marker. This element should be detached from the DOM. If an element is not provided, an empty div is created.

panelName string "chart"

The name of the panel to which the node is attached. Defaults to the main chart panel.

xPositioner string <optional>
"date"

Determines the x-axis position of the marker. Values include:

  • "date" — params.x must be set to a JavaScript date object. This will be converted to the closest masterData position if the provided date does not exactly match any existing points.
  • "master" — params.x must be set to a masterData position.
  • "bar" — params.x must be set to a dataSegment position.
  • "none" — Use CSS positioning; params.x is not used.
yPositioner string <optional>
"value"

Determines the y-axis position of the marker. Values include:

  • "value" — params.y must be set to an exact y-axis value. If params.y is omitted, the y-axis position defaults to "above_candle".
  • "above_candle" — Positions the marker right above the candle or line. If more than one marker is at the same position, the markers are aligned upwards from the first. The params.y value is not used.
  • "below_candle" — Positions the marker right below the candle or line. If more than one marker is at the same position, the markers are aligned downwards from the first. The params.y value is not used.
  • "under_candle" — Deprecated; same as "below_candle".
  • "on_candle" — Position the marker in the center of the candle or line, covering it. If more than one marker is at the same position, the markers are aligned downwards from the first. The params.y value is not used.
  • "top" — Position the marker at the top of the chart, right below the margin. If more than one marker is at the same position, the markers are aligned downwards from the first. The params.y value is not used.
  • "bottom" — Position the marker at the bottom of the chart, right above the margin. If more than one marker is at the same position, the markers are aligned upwards from the first. The params.y value is not used.
  • "none" — Use CSS positioning; params.y is not used.
permanent boolean <optional>
false

The marker stays on the chart even when the chart is re-initialized by a symbol change, call to loadChart() or initializeChart(), and so forth.

label string <optional>
"generic"

A label for the marker. Multiple markers can be assigned the same label, which allows them to be deleted simultaneously.

includeAxis boolean <optional>
false

If true, then the marker can display on the x- or y-axis. Otherwise, it is cropped at the axis edge.

chartContainer Boolean <optional>

If true, then the marker is placed directly in the chart container as opposed to in a container, or holder, node. When placing the marker directly in the chart container, the z-index setting for the marker should be set in relation to the z-index of other holders in order to place the marker above or below markers inside the holders.

Version:
  • ChartIQ Advanced Package
Since:

  • • 15-07-01 Class added.
    • 05-2016-10 Added the following params.yPositioner values: "value", "above_candle", "below_candle", "on_candle", "top", and "bottom".

Example
new CIQ.Marker({
	stx: stxx,
	xPositioner: "date",
	yPositioner: "value",
	x: someDate,
	y: somePrice,
	label: "events",
	node: newNode
});

Classes

HeadsUp
NodeCreator
Performance
Simple
TimeSpanEvent

Methods


<static> positionContentVerticalAndHorizontal(node)

Content positioner for any markers using the 'stx-marker-expand' class, this will consider the marker node's location within its container and determine where to place the content, be it to the left or right/top or bottom of the marker node (so it is all showing)

Parameters:
Name Type Description
node HTMLElement

The HTML element representing the marker which has content

Since:
  • 5.1.2


<static> removeByLabel(stx, label)

Removes all markers with the specified label from the chart object

Parameters:
Name Type Description
stx CIQ.ChartEngine

The chart object

label string

The label

Since:
  • 15-07-01


click(cx, cy, marker, panel)

Called when a marker's node is clicked. Checks to see whether the marker's node has its own click function and, if it does, calls that function, passing all arguments to it.

Parameters:
Name Type Description
cx number

Client x-coordinate on the page of the click event.

cy number

Client y-coordinate on the page of the click event.

marker CIQ.Marker

Current marker that was just clicked on.

panel CIQ.ChartEngine.Panel

Current panel where the click took place.

Since:
  • 7.2.0


remove()

Removes the marker from the chart object

Since:
  • 15-07-01