API Reference

Class: Performance

CIQ.Marker. Performance

new Performance(params)

Creates high performance canvas nodes that can be used with a CIQ.Marker.

Use this class if you need to add hundreds or thousands of markers to a chart. When a marker is created, this class creates a node from the built-in template but does not attach the node to the DOM until you hover over the canvas drawing. Once you intersect the drawing, the node is appended and you can interact with it like other markers.

The canvas draws the marker based on the classes that you append to the template (which come from params.type and params.category) being added to stx-marker class. See CIQ.ChartEngine#calculateMarkerStyles for more information.

This class takes the same params as CIQ.Marker.Simple so that the appended DOM marker works the same. This means that you can reuse all of the default styles you've created for CIQ.Marker.Simple with CIQ.Marker.Performance. Note: If you do not pass in either a headline or a story or both, your marker will not create a pop-up display when the marker is selected.

See the Markers tutorial for additional implementation instructions.

Name Type Description
params Object

Parameters to describe the marker.

Name Type Argument Default Description
type string

The marker type to be drawn.
Available options are:

  • "circle"
  • "square"
  • "callout"
headline string <optional>

The headline text to pop up when clicked.

category string <optional>

The category class to add to your marker.
Available options are:

  • "news"
  • "earningsUp"
  • "earningsDown"
  • "dividend"
  • "filing"
  • "split"

Other custom categories require a corresponding CSS entry. See example.

displayCategory boolean <optional>

Set to false to not draw the first letter of the category in the marker.

story string <optional>

The story to pop up when clicked. If left undefined, the marker displays an empty DOM node when clicked.

color string <optional>

Background color to make your marker. Overrides any style set by params.category.

displayStem boolean <optional>

Set to false to draw the marker at a specific point and not include the stem.

invert boolean <optional>

Set to true to invert the stem and point downward.

infoOnLeft boolean <optional>

If true, the information pop-up box is positioned on the left when possible.

infoOffset number <optional>

Distance to offset the information pop-up box.

  • 7.1.0
  • 7.2.0 Markers without both a headline and story are not interactive. You must provide either or both properties for a node (which is the marker pop-up display) to be appended to the DOM. Performance markers now can be positioned anywhere that a DOM marker can be positioned (above, below, or on a candle; at a value; or at the top or bottom of a chart).
  • 8.0.0 Added params.infoOnLeft, params.infoOffset, and params.invert.

Required CSS entry for a custom category ("trade"), not included in the default CSS styles.

.stx-marker.trade .stx-visual {
    background: #C950d7;
    width: 5px;
    height: 5px;

// Corresponding code:

new CIQ.Marker({
    stx: stxx,
    label: "trade",
    xPositioner: "date",
    x: OHLCData.DT,
    node: new CIQ.Marker.Performance({
        type: "circle",
        category: "trade",
        displayCategory: false,
        displayStem: false,
        headline: "Executed at $" + OHLCData.Close,
        story: "Like all ChartIQ markers, the object itself is managed by the chart."


<static> drawMarkers(stx)

Animation Loop

Iterates through all high performance canvas markers and draws them on the canvas.

See Markers tutorials for additional implementation instructions.

Name Type Description
stx CIQ.ChartEngine

A reference to the chart object.



Calculates the initial y-axis positioning when drawing a canvas marker.

Name Type Description
params object
Name Type Description
marker CIQ.Marker

The marker for which the y-axis position is calculated.

panel CIQ.ChartEngine.Panel

Panel on which the marker appears.

tick number

The tick of the quote in the chart's data set.

height number

Total height of the marker as defined by marker height plus stem height.

half number

Half the height of the marker as defined by the marker CSS style.

offset number

Height of the marker stem offset as defined by the marker stem CSS style height plus margin bottom.

inverted boolean

Indicates whether the marker stem is inverted; that is, pointing downward.

  • 7.2.0
  • 8.0.0 Added params.inverted.

Initial y-coordinate positioning for drawing the canvas marker.



Click event handler for performance markers when they are clicked in the canvas. Adds or removes the marker's pop-up expand div to the chart, depending on whether it has already been activated.

Name Type Description
params object

Configuration parameters.

Name Type Description
cx number

Client x-coordinate of click.

cy number

Client y-coordinate of click.

marker CIQ.Marker

Marker that was clicked.

panel CIQ.ChartEngine.Panel

Panel where the click occurred.

  • 7.2.0


Draws a canvas marker on the chart and positions the pop-up for the marker if necessary.

Name Type Description
marker CIQ.Marker

The marker to be drawn.

  • 7.2.0