API Reference
Namespaces
Classes
Events
Global
Externals

Class: ChartEngine

CIQ. ChartEngine


new ChartEngine(config)

Previously STXChart.

This is the constructor that creates a chart engine, instantiates its basic chart object and links it to its DOM container.

Before any chart operations can be performed, this constructor must be called.

Multiple CIQ.ChartEngine objects can exist on the same HTML document.

Once instantiated, the chart engine will never need to be constructed again, unless it is destroyed.
To load or change symbols on the chart, simply call CIQ.ChartEngine#loadChart.

Parameters:
Name Type Description
config object

Configuration object used to initialize the chart engine.
CIQ.ChartEngine#container is the minimum requirement. The complete list of parameters and objects can be found in the Members section of this page.
Example:

Since:
  • 15-07-01 Deprecated CIQ.ChartEngine#underlayPercentage.
  • m-2016-12-01 Deprecated; renamed CIQ.ChartEngine from STXChart.
Examples
// declare a chart
var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });
// override defaults after a chart object is declared (this can be done at any time. If the chart has already been rendered, you will need to call `stx.draw();` to immediately see your changes )
stxx.yaxisLabelStyle = "roundRectArrow";
stxx.layout.chartType = "bar";
// declare a chart and preset defaults
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	layout: { chartType: "candle", candleWidth: 16 },
});

Classes

Chart
Driver
Panel
XAxis
XAxisLabel
YAxis

Namespaces

AdvancedInjectable

Members


crosshairX :number

READ ONLY. Current X screen coordinate of the crosshair.

Type:
  • number

crosshairY :number

READ ONLY. Current Y screen coordinate of the crosshair.

Type:
  • number

currentVectorParameters :object

Each CIQ.ChartEngine object clones this object template and uses the copy to store the settings for the active drawing tool. The default settings can be changed by overriding these defaults on your own files.

See the Creating a custom drawing toolbar tutorial for details on how to use this template to replace the standard drawing toolbar.

This object can be extended to support additional drawing tools; for instance, note the extensive customization capabilities for fibonacci.

Type:
  • object

currentVectorParameters[`annotation`] :object

Annotation settings.

Type:
  • object
Example
{
	"annotation": {
		"font": {
			"style": null,
			"size": null, // override .stx_annotation default
			"weight": null, // override .stx_annotation default
			"family": null // override .stx_annotation default
		}
	}
}

currentVectorParameters[`axisLabel`] :string

Axis Label. Set to 'true' to display a label on the x axis.
Not all parameters/values are valid on all drawings. See the specific reconstruct method for your desired drawing for more details(Example: CIQ.Drawing.horizontal#reconstruct)

Type:
  • string
Default Value:
  • true

currentVectorParameters[`currentColor`] :string

Line color.
Not all parameters/values are valid on all drawings. See the specific reconstruct method for your desired drawing for more details(Example: CIQ.Drawing.horizontal#reconstruct)

Type:
  • string
Default Value:
  • auto

currentVectorParameters[`fibonacci`] :object

Fibonacci settings. See CIQ.Drawing.fibonacci#reconstruct parameters object for valid options

Type:
  • object
Since:
  • 3.0.9 Added 0.786 and -0.786 levels.
  • 5.2.0 Added 1.272 level.
Example
{
	"fibonacci": {
		"trend": {
			"color": "auto",
			"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 }
		},
		"fibs": [
			{
				"level": -0.786,
				"color": "auto",
				"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 }
			},
			{
				"level": -0.618,
				"color": "auto",
				"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 },
				"display": true
			},
			{
				"level": -0.382,
				"color": "auto",
				"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 },
				"display": true
			},
			{
				"level": 0,
				"color": "auto",
				"parameters": { "pattern": "solid", "lineWidth": 1 },
				"display": true
			},
			{
				"level": 0.382,
				"color": "auto",
				"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 },
				"display": true
			},
			{
				"level": 0.618,
				"color": "auto",
				"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 },
				"display": true
			},
			{
				"level": 0.786,
				"color": "auto",
				"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 }
			},
			{
				"level": 0.5,
				"color": "auto",
				"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 },
				"display": true
			},
			{
				"level": 1,
				"color": "auto",
				"parameters": { "pattern": "solid", "lineWidth": 1 },
				"display": true
			},
			{
				"level": 1.382,
				"color": "auto",
				"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 },
				"display": true
			},
			{
				"level": 1.618,
				"color": "auto",
				"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 },
				"display": true
			}
		],
		"extendLeft": false,
		"printLevels": true, // display the % levels to the right of the drawing
		"printValues": false, // display the values on the y axis
		"timezone": {
			"color": "auto",
			"parameters": { "pattern": "solid", "opacity": 0.25, "lineWidth": 1 }
		}
	}
}

currentVectorParameters[`fillColor`] :string

Fill color.
Not all parameters/values are valid on all drawings. See the specific reconstruct method for your desired drawing for more details(Example: CIQ.Drawing.horizontal#reconstruct)

Type:
  • string
Default Value:
  • #7DA6F5

currentVectorParameters[`lineWidth`] :number

Line width
Not all parameters/values are valid on all drawings. See the specific reconstruct method for your desired drawing for more details(Example: CIQ.Drawing.horizontal#reconstruct)

Type:
  • number
Default Value:
  • 1

currentVectorParameters[`pattern`] :string

Line pattern.
Valid values for pattern: solid, dotted, dashed, none
Not all parameters/values are valid on all drawings. See the specific reconstruct method for your desired drawing for more details(Example: CIQ.Drawing.horizontal#reconstruct)

Type:
  • string
Default Value:
  • solid

currentVectorParameters[`vectorType`] :string

The type of drawing to activate.

See the list of classes in CIQ.Drawing for available drawing types. Use CIQ.ChartEngine#changeVectorType to activate.

Type:
  • string

currentVectorParameters[`volumeProfile`] :object

Volume profile drawing settings.

Type:
  • object
Since:
  • 8.4.0

Example
volumeProfile: {
	priceBuckets: 30;
}

defaultDisplayTimeZone :string

If set to a valid time zone identifier, then new CIQ.ChartEngine objects will pull their display timezone from this.

Type:
  • string

drawingLine :boolean

READ ONLY. Toggles to true when a drawing is initiated

Type:
  • boolean

drawingTools :object

READ ONLY. Map of registered drawing tools and their constructors. Populated via lazy eval, so it only contains tools which were used so far.

Type:
  • object
Default Value:
  • {}

htmlControls :object

Defines raw html for the chart controls.

These controls can be overridden by manually placing HTML elements in the chart container with the same ID.

To completely disable a chart control, programmatically set controls[controlID]=null where controlID is the control to disable. You can also set the main htmlControls object to null to disable all controls at once.

Type:
  • object
Since:
  • 5.2.0 Any id can be set to null to disable

Examples
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	controls: { chartControls: null },
});
// before calling loadChart(). Disables all controls
stxx.controls = null;
// before calling loadChart(). Disables only the chartControls (zoom on and out buttons)
stxx.controls["chartControls"] = null;

htmlControls[`annotationCancel`] :string

controlID for the Annotation Cancel button (class="stx-btn stx_annotation_cancel").

Type:
  • string

htmlControls[`annotationSave`] :string

controlID for the Annotation Save button (class="stx-btn stx_annotation_save").

Type:
  • string

htmlControls[`baselineHandle`] :string

controlID for grabber which sits to right of baseline so it can be moved.

Type:
  • string

htmlControls[`chartControls`] :string

controlID for the zoom-in and zoom-out buttons (class="stx_chart_controls").

Type:
  • string

htmlControls[`crossX`] :string

controlID for the Horizontal Crosshair line (class="stx_crosshair stx_crosshair_x").

Type:
  • string

htmlControls[`crossY`] :string

controlID for the Vertical Crosshair line (class="stx_crosshair stx_crosshair_y").

Type:
  • string

htmlControls[`dragOk`] :string

Indicator that it is OK to move a study or series

Type:
  • string
Since:
  • 7.1.0


htmlControls[`drawOk`] :string

Indicator that it is OK to draw average lines on this plot line

Type:
  • string
Since:
  • 7.0.0


htmlControls[`floatDate`] :string

controlID for div which floats along the X axis with the crosshair date (class="stx-float-date").

Type:
  • string

htmlControls[`handleTemplate`] :string

controlID for div which controls the handle to resize panels (class="stx-ico-handle").

Type:
  • string
Example
// example to hide the handle and prevent resizing of panels
.stx-ico-handle {
	display: none;
}

htmlControls[`home`] :string

controlID for the home button (class="stx_jump_today home"). The button goes away if you are showing the most current data. See example to manually turn it off. You can call stxx.home(); programmatically. See CIQ.ChartEngine#home for more details

Type:
  • string
Example
// disable the home button
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	layout: { candleWidth: 16, crosshair: true },
});
stxx.controls["home"] = null;

htmlControls[`iconsTemplate`] :string

controlID for the div which hosts the panel title (symbol name, study name ) and the study control icons on the on the upper left hand corner of each panel (class="stx-panel-control") This control can not be disabled, but can be manipulated using the corresponding CSS style classes. On the main chart panel, stx-chart-panel is added to the class definition ( in addition to stx-panel-title which just controls the tile) so you can manipulate the entire chart controls section, separately from the rest of the study panel controls.

Type:
  • string
Examples
// example to hide the chart symbol title
.stx-panel-control.stx-chart-panel .stx-panel-title {
	display: none;
}

// for backwards compatibility, this is still supported:
.chart-title {
	display: none;
}
// example to hide all panels titles
.stx-panel-control .stx-panel-title {
	display: none;
}

htmlControls[`mSticky`] :string

controlID for the Trash Can button / Series delete panel (class="mSticky"). Also see CIQ.ChartEngine#displaySticky

Type:
  • string
Example
// Disable the tooltip that appears when hovering over an overlay (drawing, line study, etc.).
stxx.controls["mSticky"] = null;

htmlControls[`notificationTray`] :string

Holds notifications displayed by the chart. See CIQ.ChartEngine#displayNotification.

Type:
  • string
Since:
  • 8.0.0


ignoreTouch :number

Set to true to true to bypass all touch event handling.

Type:
  • number

pluginBasePath :string

If set, overrides the default base path for plug-ins.

By default, plug-ins loaded by means of a script tag check for resources inside the plug-ins directory, plugins/. However, if the application is served from outside the chartiq directory, or the plug-ins folder is otherwise not available at ./, you may need to specify where the plug-ins directory can be found so resources can be loaded.

Path must end in /.

Type:
  • string
Since:
  • 8.0.0
  • 8.4.0 No longer in use.
Default Value:
  • plugins/

resizingPanel :boolean

READ ONLY. Toggles to true when a panel is being resized

Type:
  • boolean

useAnimation :boolean

Browser animation API is on by default.

Type:
  • boolean
Default Value:
  • true

useOldAndroidClear :boolean

Mitigates problems clearing the canvas on old (defective) Android devices by performing additional function on the canvas, normally not needed on the newer devices. Set to false to boost native android browser performance, but at risk of "double candle" display errors on some older devices.

Type:
  • boolean
Default Value:
  • true

allowDrawingZoom :boolean

Set to true to enable any user zooming on the chart when creating a drawing

Type:
  • boolean
Since:
  • 8.4.0 Add flag for zooming while drawing

Example
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	allowDrawingZoom: true,
	layout: { candleWidth: 16, crosshair: true },
});

allowEquations :boolean

Set to true to allow an equation to be entered into the symbol input. For example, =2*IBM-GM NOTE: the equation needs to be preceded by an equals sign (=) in order for it to be parsed as an equation. See CIQ.formatEquation and CIQ.computeEquationChart for more details on allowed syntax.

Type:
  • boolean
Default Value:
  • true

allowScroll :boolean

Set to false to disable any user scrolling of the chart

Type:
  • boolean
Since:
  • 04-2015

Default Value:
  • true
Example
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	allowScroll: false,
	layout: { candleWidth: 16, crosshair: true },
});

allowSideswipe :boolean

Set to false to disable 2 finger side swipe motion for scrolling

Type:
  • boolean
Since:
  • 2015-12-08

Default Value:
  • true

allowThreeFingerTouch :boolean

If set to true then a three finger movement will increment periodicity.

Type:
  • boolean

allowZoom :boolean

Set to false to disable any user zooming on the chart

Type:
  • boolean
Since:
  • 04-2015

Default Value:
  • true
Example
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	allowZoom: false,
	layout: { candleWidth: 16, crosshair: true },
});

animations :object

Animations. These can be overridden with customized EaseMachines To disable an animation replace with an EaseMchine with one ms as the second parameter.

Type:
  • object
Example
stxx.animations.zoom = new CIQ.EaseMachine(Math["easeOutCubic"], 1);

autoPickCandleWidth :object

Allow the candle width to be determined dynamically when using CIQ.ChartEngine#setRange. This will require a valid CIQ.ChartEngine#dynamicRangePeriodicityMap

Type:
  • object
Since:
  • m-2016-12-01

Default Value:
  • {"turnOn":false,"candleWidth":5}
Example
{
	"autoPickCandleWidth": {
		"turnOn": true,
		"candleWidth": 5
	}
}

autoPickCandleWidth[`candleWidth`] :number

Set if you want to set a specific candle width when using CIQ.ChartEngine#setRange. This will require a valid CIQ.ChartEngine#dynamicRangePeriodicityMap. Set to '0' if you want the candle width to be determined according to chart type

Type:
  • number
Default Value:
  • 5

autoPickCandleWidth[`turnOn`] :boolean

Turn to 'true' if you want the periodicity to be determined dynamically when using CIQ.ChartEngine#setRange. This will require a valid CIQ.ChartEngine#dynamicRangePeriodicityMap

Type:
  • boolean

axisBorders :boolean

Set to false if you don't want the axis borders drawn. This will override individual settings on yaxis and xaxis.

Type:
  • boolean

barsHaveWidth :object

Chart types whose bars have width, as opposed to a line-type chart whose "bars" are just a point on the chart. This is useful when the engine adjusts the chart for smooth scrolling and homing.

Type:
  • object
Since:
  • 4.0.0

Default Value:
  • {"enumerable":true,"get":"","set":""}

baselineHelper :Map.<CIQ.Renderer, object>

Baseline helper for the chart engine.

Maps renderers to value objects that contain data related to the baseline, including the baseline handle (a reference to the DOM element that functions as the handle).

Type:
Since:
  • 8.2.0


bypassRightClick :object

Set to true to bypass right clicks on all overlay types and their hovering pop-ups. Or define independent settings for series, studies, and drawings by using an object instead.

On touch devices, it will bypass CIQ.ChartEngine.AdvancedInjectable#touchDoubleClick

Also see:

Type:
  • object
Since:
  • 2016-07-16
  • 5.1.0 An object containing booleans to separate series, studies, and drawings.
Default Value:
  • {"series":false,"study":false,"drawing":false}
Example
this.bypassRightClick = {
	series: false,
	study: false,
	drawing: false,
};

callbacks :object

Specify a callback by assigning a function to the event. Once the event triggers the callback will be executed.

Note: All callbacks have been deprecated in favor of CIQ.ChartEngine#addEventListener

Type:
  • object
Deprecated:
  • 4.0.0

Examples
// using event listener
stxx.addEventListener("callbackNameHere", function (callBackParametersHere) {
	CIQ.alert("triggered!");
});
// using callback function
stxx.callbacks.callbackNameHere = function (callBackParametersHere) {
	CIQ.alert("triggered!");
};

callbacks[`calculateTradingDecimalPlaces`] :function

Called to determine how many decimal places the stock trades in.

This is used for heads up display and also for the current price pointer label.

By default it is set to CIQ.calculateTradingDecimalPlaces

Format:
callback({stx:CIQ.ChartEngine, chart:CIQ.ChartEngine.Chart, symbol: String, symbolObject:Object})

Type:
  • function
Deprecated:

callbacks[`drawing`] :function

Called when a drawing is added or deleted (all the drawings are returned, not just the new one)

Format:
callback({stx:CIQ.ChartEngine, symbol: String, symbolObject:Object, drawings: Object})

Type:
  • function

callbacks[`drawingEdit`] :function

Called when a right-click is detected on a highlighted drawing.

Format:
callback({stx:CIQ.ChartEngine, drawing:CIQ.Drawing})

Type:
  • function
Since:
  • 6.2.0


callbacks[`layout`] :function

Called when the layout changes

Format:
callback({stx:CIQ.ChartEngine, chart:CIQ.ChartEngine.Chart, symbol: String, symbolObject:Object, layout: Object})

Type:
  • function

callbacks[`longhold`] :function

Called when a user "long holds" on the chart. By default this is set to 700 milliseconds. Optionally change the value of stxx.longHoldTime to a different setting, or set to zero to disable.

Format:
callback({stx:CIQ.ChartEngine, panel:CIQ.ChartEngine.Panel, x:this.cx, y:this.cy})

Type:
  • function
Since:
  • 2016-06-22

Examples
// using event listener
stxx.longHoldTime=... // Optionally override default value of 700ms
stxx.addEventListener("longhold", function(lhObject){
	CIQ.alert('longhold event at x: ' + lhObject.x + ' y: '+ lhObject.y);
});
// using callback function
stxx.longHoldTime=... // Optionally override default value of 700ms
stxx.callbacks.longhold=function(lhObject){
	CIQ.alert('longhold event at x: ' + lhObject.x + ' y: '+ lhObject.y);
});

callbacks[`move`] :function

Called when a user moves on the chart. Not called if a drawing tool is active, panel resizing, etc grab is true if a mouse user has the mouse button down while moving. For touch users it is true if they do not have the crosshair tool enabled.

Format:
callback({stx:CIQ.ChartEngine, panel:CIQ.ChartEngine.Panel, x:this.cx, y:this.cy, grab:boolean})

Type:
  • function

callbacks[`preferences`] :function

Called when preferences are changed

Format:
callback({stx:CIQ.ChartEngine})

Type:
  • function

callbacks[`rightClick`] :function

Called when a user clicks or right clicks on the chart. Not called if the user right clicks on a drawing or study when stxx.bypassRightClick=true

Format:
callback({stx:CIQ.ChartEngine, panel:CIQ.ChartEngine.Panel, x:this.cx, y:this.cy})

Type:
  • function
Since:
  • 09-2016-19

Example
// using event listener
stxx.addEventListener("rightClick", function (rcObject) {
	alert("right click event at x: " + rcObject.x + " y: " + rcObject.y);
});

callbacks[`studyOverlayEdit`] :function

Called when a user right clicks on an overlay study. If forceEdit==true then a user has clicked on an edit button (cog wheel) so pull up an edit dialog. Otherwise they have simply right clicked so give them a context menu.

Please note that this callback must be set before you call CIQ.ChartEngine#importLayout. Otherwise your imported studies will not have an edit capability

Format:
studyOverlayEdit({stx:stx,sd:sd,inputs:inputs,outputs:outputs, parameters:parameters, forceEdit: forceEdit});

The following CSS entry must also be present to enable the Right click to Manage text on the mouse-over context menu (div class="mSticky" generated by CIQ.ChartEngine.htmlControls):

.rightclick_study .mouseManageText {
display: inline; }

See CIQ.Studies.addStudy for more details.

Type:
  • function

callbacks[`studyPanelEdit`] :function

Called when a user clicks the edit button on a study panel.

Please note that this callback should be set before you call CIQ.ChartEngine#importLayout. Otherwise your imported studies will not have an edit capability

Format:
studyPanelEdit({stx:stx,sd:sd,inputs:inputs,outputs:outputs, parameters:parameters});

See CIQ.Studies.addStudy for more details.

Type:
  • function

callbacks[`symbolChange`] :function

Called when the symbol is changed (when loadChart is called), added (addSeries, addStudy) or removed (removeSeries, removeStudy). Note that this is not called if the symbol change occurs during an importLayout

Format:
callback({stx:CIQ.ChartEngine, symbol: String, symbolObject:Object, action:["master"|"add-series"|"remove-series"})

Type:
  • function
Since:
  • 06-2016-21


callbacks[`symbolImport`] :function

Called when the symbol is first imported into the layout.

Format:
callback({stx:CIQ.ChartEngine, symbol: String, symbolObject:Object, action:"master"})

Type:
  • function
Since:
  • 4.0.0


callbacks[`tap`] :function

Called when a user clicks or taps on the chart. Not called if a drawing tool is active!

Format:
callback({stx:CIQ.ChartEngine, panel:CIQ.ChartEngine.Panel, x:this.cx, y:this.cy})

Type:
  • function
Examples
// using event listener
stxx.addEventListener("tap", function (tapObject) {
	CIQ.alert("tap event at x: " + tapObject.x + " y: " + tapObject.y);
});
// using callback
// this example  uses barFromPixel() to get the actual bar from the pixel location
stxx.callbacks.tap = function (tapObject) {
	var msg = "tap event at x: " + tapObject.x + " y: " + tapObject.y;
	var bar = this.barFromPixel(this.cx);
	if (this.chart.dataSegment[bar]) {
		msg += " Date:" + this.chart.dataSegment[bar].DT;
		msg += " Close:" + this.chart.dataSegment[bar].Close;
	}
	alert(msg);
};

callbacks[`theme`] :function

Called when a theme is changed

Format:
callback({stx:CIQ.ChartEngine})

Type:
  • function

candleWidthPercent :number

Adjust to increase or decrease the default width of candles (see Understanding Chart Range).

Type:
  • number
Default Value:
  • 0.65

captureMouseWheelEvents :boolean

If set to false it will allow up/down mouseWheel / touchPad swiping to pass through the chart container so the main page can manage it. This allows a user swiping up and down to swipe through the chart instead of having the chart capture the event and prevent the page from continue moving. It therefore produces a more natural up/down sliding of the page.

Type:
  • boolean
Since:
  • m-2016-12-01.4

Default Value:
  • true

captureTouchEvents :boolean

Primarily intended for mobile devices, if set to false it will allow up/down swiping to pass through the chart container so the main page can manage it. This allows a user swiping up and down to swipe through the chart instead of having the chart capture the event and prevent the page from continue moving. It therefore produces a more natural up/down swiping motion throughout the page.

Type:
  • boolean
Since:
  • 12-2015-08

Default Value:
  • true

changeCallback :function

This function has been deprecated. Please use CIQ.ChartEngine#addEventListener instead.

This is the callback function used to react to CIQ.ChartEngine#changeOccurred.

Use this for storing chart configurations or drawings real time as users make changes.

Expected format :

	fc(stxChart, eventType);

Currently implemented values for "eventType" are "layout" and "vector".

You can create any additional event types and trigger them by calling 'CIQ.ChartEngine.changeOccurred(eventType)'

Note only one changeCallback function can be registered per chart object. As such, you must program it to handle any and all possible events triggered by CIQ.ChartEngine#changeOccurred.

Type:
  • function
Since:
  • 4.0.0 Deprecated

Deprecated:
  • Yes
Example
stxx.changeCallback = function (stxx, eventType) {
	if (eventType == "layout") saveLayout();
	if (eventType == "vector") saveDrawing();
};

chart :CIQ.ChartEngine.Chart

Holds CIQ.ChartEngine.Chart object

Type:

cleanupGaps :string

If set, CIQ.ChartEngine#doCleanupGaps will be automatically called on intra-day or daily interval charts to create missing data points during market hours/days for stocks that may have missing bars.

carry will cause the closing price to be carried forward, resulting in dashes on a candle/bar chart or continuous line on a line or mountain chart.
gap will cause physical breaks to occur on the chart in the gapped position.

Note: the clean up process uses the active periodicity and the active market definition, if any. So you must first set those to ensure proper clean up. If no market definition is enabled, the clean up will assume gaps need to be added during the entire 24 hours period, every day.
See "CIQ.Market" for details on how to properly configure the library to your market hours requirements.
No gaps will be cleaned for tick since by nature it is no a predictable interval.

Important information to prevent inaccurate 'gapping'

  • This parameter must be set before any data is loaded into the chart.
  • The cleanup process leverages the current market iterator which traverses along the timeline on the exact minute/second/millisecond mark for intraday data. As such, you must ensure your time stamps match this requirement. If your data does not comply, you must round your timestamps before sending the data into the chart.
    For example, if in minute periodicity, seconds and milliseconds should not be present or be set to zero.
Type:
  • string
Since:
  • 15-07-01 Gaps are automatically cleaned up unless this flag is set to false.
  • 2015-11-1 Gaps are not automatically cleaned unless this flag is set to true.
  • m-2016-12-01.4 Now supports "carry" and "gap" values. Setting to non-false will default to "carry" for backward compatibility with prior versions.
Example

If using a quoteFeed, just set the parameter will automatically call CIQ.ChartEngine#doCleanupGaps

var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });
stxx.attachQuoteFeed(yourFeed, { refreshInterval: 1 });
stxx.setMarketFactory(CIQ.Market.Symbology.factory);
stxx.cleanupGaps = "carry";
stxx.setPeriodicity({ period: 1, interval: 5, timeUnit: "minute" });
stxx.loadChart("SPY");

cloneDrawing :number

Manage drawing cloning state.

Set to true to enable the ability to clone drawings.
Once enabled, drawings can be cloned once or multiple times. A user must highlight the drawing, click on it, move the mouse to a new location and click again to set.
Reset to false when you want the cloning to end.

This can be done based on a key stroke, button press, etc. For example, you can set to true when the control key is pressed and disable when it is released.

Type:
  • number
Since:
  • 07-2016-16.7

Example
document.onkeyup = keyup;
document.onkeydown = keydown;

// disable cloning if the ctl key is released
function keyup(e) {
	var key = window.event ? event.keyCode : e.keyCode;
	if (key == 18) stxx.cloneDrawing = false;
}

// enable cloning if the ctl key is pressed
function keydown(e) {
	var key = window.event ? event.keyCode : e.keyCode;
	if (key == 18) stxx.cloneDrawing = true;
}

colorByCandleDirection :boolean

Set to true to color any OHLC type rendering (bar, candles) as well as the volume study, based on difference between open and close, rather than difference between previous close and current close.

Used in CIQ.Renderer.OHLC and CIQ.Studies.createVolumeChart

Type:
  • boolean
Since:
  • 4.0.0


container :object

The DOM container that will be running the chart engine. This is a required field when calling new CIQ.ChartEngine

Type:
  • object
Example
// declare a chart
var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });

controls :object

Holds the HTML control elements managed by the chart. Usually this will be a copy of the default htmlControls. These are not the GUI elements around the chart, but rather the HTML elements that the library will directly interact with on the canvas for things like panel resizing, study edit controls, zooming controls, etc. See CIQ.ChartEngine.htmlControls for more details.

Type:
  • object

crosshairTick :number

READ ONLY. The tick representing the crosshair cursor point

Type:
  • number

crosshairValue :number

READ ONLY. The value (price) representing the crosshair cursor point

Type:
  • number

crosshairXOffset :number

X axis offset for touch devices so that finger isn't blocking crosshair

Type:
  • number

crosshairYOffset :number

Y axis Offset for touch devices so that finger isn't blocking crosshair

Type:
  • number

currentBaseline :CIQ.Renderer

A reference to the renderer of the baseline whose handle is currently selected.

The baseline handle can be accessed from CIQ.ChartEngine#baselineHelper.

Type:
Since:
  • 8.2.0


currentVectorParameters :CIQ.ChartEngine.currentVectorParameters

Cloned copy of CIQ.ChartEngine.currentVectorParameters object template. Use it to store the settings for the active drawing tool.

Type:

cx :number

READ ONLY. Mouse pointer X pixel location in reference to the chart canvas. where cx=0 and cy=0 is the upper left corner of the chart.

Type:
  • number

cy :number

READ ONLY. Mouse pointer Y pixel location in reference to the chart canvas. where cx=0 and cy=0 is the upper left corner of the chart.

Type:
  • number

dataCallback :function

This is the callback function used by CIQ.ChartEngine#setPeriodicity when no quotefeed has been attached to the chart. Called if the masterData does not have the interval requested.

Do not initialize if you are using a quotefeed

Type:
  • function
Example
stxx.dataCallback = function () {
	// put code here to get the new data in the correct periodicity.
	// use layout.interval and layout.periodicity to determine what you need.
	// finally call stxx.loadChart(symbol,data) to load the data and render the chart.
};

dataZone :string

READ ONLY. Timezone of the masterData, set by CIQ.ChartEngine#setTimeZone.

Type:
  • string

disableBackingStoreDuringTouch :boolean

On touch devices, when set to true, the backing store will be turned off while a user is panning or zooming the chart. This increases performance during the operation by reducing resolution. Resolution is restored once the user lifts their finger. Generally, you'll want to enable this dynamically when you know that a particular device has poor canvas performance. This defaults to true but can be disabled by setting to false.

Type:
  • boolean
Since:
  • 4.0.0


displayGridLinesInStudies :boolean

Set to true to display horizontal grid lines on studies. This parameter is only used when a custom y axis is not defined for the study.

To also disable zones and center lines on studies add: CIQ.Studies.drawHorizontal=function(){}; For more details see CIQ.Studies.doPostDrawYAxis

Type:
  • boolean
Since:
  • 3.0.0


displayIconsClose :boolean

Set these to false to not display this panel management component. See CIQ.ChartEngine#controls for alternate methods and more details.

Type:
  • boolean
Since:
  • 3.0.7

Default Value:
  • true
Example
stxx.displayIconsClose = false;

displayIconsSolo :boolean

Set these to false to not display this panel management component. See CIQ.ChartEngine#controls for alternate methods and more details.

Type:
  • boolean
Default Value:
  • true
Example
stxx.displayIconsSolo = false;

displayIconsUpDown :boolean

Set these to false to not display the up and down arrows in the panel management component. See CIQ.ChartEngine#controls for alternate methods and more details.

Type:
  • boolean
Default Value:
  • true
Example
stxx.displayIconsUpDown = false;

displayInitialized :boolean

READ ONLY. This gets set to true when the chart display has been initialized.

Type:
  • boolean

displayPanelResize :boolean

Set these to false to not display this panel management component. See CIQ.ChartEngine#controls for alternate methods and more details.

Type:
  • boolean
Default Value:
  • true
Example
stxx.displayPanelResize = false;

displayZone :string

READ ONLY. Timezone to display on the chart, set by CIQ.ChartEngine#setTimeZone.

Type:
  • string

dontRoll :boolean

Set this to true if your server returns data in week or monthly ticks, and doesn't require rolling computation from daily.

If set to false:

  • 'weekly' bars will be aligned to the first open market day of the week according to the active market definitions (Weeks start Sunday).
  • 'monthly' bar will be aligned to the first market day of the month according to the active market definitions.
Type:
  • boolean

doubleClickTime :number

The maximum number of milliseconds between clicks that trigger a double-click.

Type:
  • number
Since:
  • 8.0.0

Default Value:
  • 250

drawingObjects :array

Stores a list of active drawing object on the chart. Serialized renditions of drawings can be added using CIQ.ChartEngine#createDrawing and removed using CIQ.ChartEngine#removeDrawing

Type:
  • array
Default Value:
  • []

dynamicRangePeriodicityMap :array

Map of multiples to be used to dynamically determine periodicity (candle width) upon range selection when using CIQ.ChartEngine#setRange Used when CIQ.ChartEngine#autoPickCandleWidth is enabled

Default Value:

[
    {
        interval : 1,
        rangeInMS : CIQ.MINUTE
    },
    {
        interval : 5,
        rangeInMS : CIQ.MINUTE * 5
    },
    {
        interval : 30,
        rangeInMS : CIQ.MINUTE * 30
    },
    {
        interval : 60,
        rangeInMS : CIQ.MINUTE * 60
    },
    {
        interval : "day",
        rangeInMS : CIQ.DAY
    },
    {
        interval : "month",
        rangeInMS : CIQ.MONTH
    },
    {
        interval : "year",
        rangeInMS : CIQ.YEAR
    }
]
Type:
  • array
Since:
  • 11-2016-29


escapeOnSerialize :boolean

When true serialize methods may escape their values with encodeURIComponent.

Type:
  • boolean
Since:
  • 4.1.0

Default Value:
  • true

eventListeners :array

READ ONLY. Array of event listeners currently attached to the engine. These listeners will be killed when CIQ.ChartEngine#destroy is called.

See CIQ.ChartEngine#addEventListener and CIQ.ChartEngine#removeEventListener

Type:
  • array

extendLastTick :boolean

When set to true, line and mountain charts are extended slightly in order to reduce whitespace at the right edge of the chart

Type:
  • boolean
Since:
  • 05-2016-10 The line will be extended to the end of the chart (full candle width) instead of the candle border, even when using yaxisLabelStyle "roundRectArrow".


fetchMaximumBars :object

chart types which require fetching as many bars as possible (since they aggregate data)

Type:
  • object
Default Value:
  • {"rangebars":true,"kagi":true,"renko":true,"linebreak":true,"pandf":true}

grabbingScreen :boolean

READ ONLY. Toggles to true when the screen is being panned

Type:
  • boolean

highLowBars :object

Chart types which plot more than one data field (OHLC charts). Putting a chart type here will disable the use of CIQ.ChartEngine.Chart#defaultPlotField.

Type:
  • object
Since:
  • 4.0.0

Default Value:
  • {"enumerable":true,"get":"","set":""}

insideChart :boolean

READ ONLY. Toggles to true whenever the mouse cursor is within the chart (canvas)

Type:
  • boolean

isHistoricalModeSet :boolean

READ ONLY. If true the chart is in 'historical mode' and no quotefeed 'update' calls will be made.

This happens when setSpan or setRange are used to 'jump' to a range in the distance past, where the master data no longer extends from the end of the displayed range to the current bar.

Type:
  • boolean

layout :object

Contains the current chart layout.

Layout parameters can be directly pre-set on a chart at the time the engine is instantiated, by providing an object exactly matching the internal layout format.
The following is an example for setting some of the available layout parameters:

var stxx=new CIQ.ChartEngine({
			container: document.querySelector(".chartContainer"),
			layout:{
				"crosshair":true,
				"interval":"day",
				"periodicity":1,
				"chartType": "candle",
				"candleWidth": 16
			}
});

These parameters will then be activated when loadChart() is called to render the chart.
Once a chart is rendered, most of these parameters become READ ONLY,and must be modified using their corresponding methods, as indicated in the documentation, to ensure chart integrity.

Important Note on internal periodicity format:
Internal format of the layout object does not match the parameters used in ​CIQ.ChartEngine#setPeriodicity or CIQ.ChartEngine#loadChart.
Use CIQ.ChartEngine#getPeriodicity to extract internal periodicity into the expected external format.

See importLayout and exportLayout for methods to serialize a layout and restore previously saved settings.

Type:
  • object

layout[`adj`] :boolean

Whether adjusted or nominal prices are being displayed. If true then the chart will look for "Adj_Close" in the masterData as an alternative to "Close".

Type:
  • boolean
Default Value:
  • true

layout[`aggregationType`] :string

READ ONLY. Active aggregation for the chart.

Available options are:

  • "rangebars"
  • "ohlc"
  • "kagi"
  • "pandf"
  • "heikinashi"
  • "linebreak"
  • "renko"

Use CIQ.ChartEngine#setAggregationType to set this value.

See Chart Styles and Types for more details.

Type:
  • string
Default Value:
  • ohlc

layout[`animation`] :boolean

Specifies whether animation is enabled.

Note: animation requires the Animation addon.

Type:
  • boolean
Since:
  • 8.4.0

Default Value:
  • true

layout[`candleWidth`] :number

READ ONLY. Candle width in pixels ( see Understanding Chart Range and CIQ.ChartEngine#candleWidthPercent)

Type:
  • number
Default Value:
  • 8

layout[`chartScale`] :string

READ ONLY. Active scale for the chart.

See CIQ.ChartEngine#setChartScale

Replaces CIQ.ChartEngine.layout.semiLog

Type:
  • string
Default Value:
  • linear

layout[`chartType`] :string

READ ONLY. The primary chart type.

Available options are:

  • "none"
  • "line"
  • "step"
  • "mountain"
  • "baseline_delta"
  • "candle"
  • "bar"
  • "hlc"
  • "hlc_box" — Requires js/extras/hlcbox.js.
  • "hlc_shaded_box" — Requires js/extras/hlcbox.js.
  • "wave"
  • "scatterplot"
  • "histogram"
  • "rangechannel"
  • "marketdepth" — Requires the Active Trader plug-in. See CIQ.ChartEngine#updateCurrentMarketData for data requirements.
  • "crosssection" — Requires the Cross Section plug-in.

Variations of these types are available by prepending terms to the options as follows:

  • "step_" - add to mountain, marketdepth e.g. step_mountain, step_volume_marketdepth
  • "vertex_" - add to line, step, mountain, baseline_delta
  • "hollow_" - add to candle
  • "volume_" - add to candle, marketdepth e.g. mountain_volume_marketdepth (Adding volume to marketdepth also creates a volume histogram in the same panel)
  • "colored_" - add to line, mountain, step, bar, hlc
  • "mountain_" - add to baseline_delta, marketdepth e.g. mountain_volume_marketdepth

Other options are available provided a renderer is created with a requestNew function which will support the option, see CIQ.Renderer.Lines#requestNew and CIQ.Renderer.OHLC#requestNew

Use CIQ.ChartEngine#setChartType to set this value.

See Chart Styles and Types for more details.

Type:
  • string
Since:
  • 05-2016-10.1 Added "baseline_delta_mountain" and "colored_mountain".
  • 3.0.0 Added "histogram" and "step".
  • 3.0.7 Added "hlc".
  • 4.0.0 Added "colored_step" and "colored_hlc".
  • 5.1.0 More chart types available using combinations of terms.
  • 6.1.0 Added "marketdepth".
  • 7.3.0 Added "termstructure".
  • 8.3.0 Added "crosssection". Removed "termstructure".
Default Value:
  • candle

layout[`crosshair`] :boolean

Set to true to enable crosshairs in the active layout.

Also see CIQ.ChartEngine.AdvancedInjectable#doDisplayCrosshairs for more details on crosshairs behavior.

Type:
  • boolean
Example
// enable crosshair (usually called from a UI button/toggle)
stx.layout.crosshair = true;
// add this if you want the crosshair to display right away instead of when the user starts moving the mouse over the chart
stx.doDisplayCrosshairs();
// add this if you want to trigger a layout change event; maybe to save the layout.
stx.dispatch("layout", {
	stx: stx,
	symbol: stx.chart.symbol,
	symbolObject: stx.chart.symbolObject,
	layout: stx.layout,
	drawings: stx.drawingObjects,
});

layout[`extended`] :boolean

READ ONLY. Flag for extended hours time-frames.

The chart includes the 'extended' parameter in the params object sent into the fetch() call. Your quote feed must be able to provide extended hours data when requested (extended:true) for any extended hours functionality to work.

See CIQ.ExtendedHours and CIQ.Market for more details on how extended hours are set and used.

Type:
  • boolean

layout[`flipped`] :boolean

READ ONLY. The primary y-axis and all linked drawings, series and studies will display inverted (flipped) from its previous state when 'true'.

Use CIQ.ChartEngine#flipChart to set.

Type:
  • boolean

layout[`interval`] :string

READ ONLY. Chart interval.

Note that internal interval format will differ from API parameters used in CIQ.ChartEngine#setPeriodicity and CIQ.ChartEngine#loadChart.

Available options are:

  • [number] representing minutes
  • "day"
  • "week"
  • "month"

See the Periodicity and Quote feed tutorial.

Type:
  • string
Default Value:
  • day

layout[`marketSessions`] :object

READ ONLY. Tracks the extended market sessions to display on the chart.

See CIQ.ExtendedHours and CIQ.Market for more details on how extended hours are set and used.

Type:
  • object
Since:
  • 06-2016-02

Default Value:
  • {}
Example
marketSessions = {
	session1: true,
	session2: true,
	session3: false,
	pre: true,
	post: true,
};

layout[`outliers`] :boolean

READ ONLY. Specifies whether outlier detection is enabled. A value of true enables detection; false disables detection.

See CIQ.Outliers for information on how outlier detection is used.

Type:
  • boolean
Since:
  • 7.5.0


layout[`panels`] :object

READ ONLY. List of active chart panels. Usually correspond to a study or series.

Please note: To facilitate study name translations, study names and their corresponding panels use zero-width non-joiner (unprintable) characters to delimit the general study name from the specific study parameters. Example: "\u200c"+"Aroon"+"\u200c"+" (14)". At translation time, the library will split the text into pieces using the ZWNJ characters, parentheses and commas to just translate the required part of a study name. For more information on ZWNJ characters see: Zero-width_non-joiner. Please be aware of these ZWNJ characters, which will now be present in all study names and corresponding panel names; including the layout.panels study keys.
To prevent issues, always use the names returned in the study descriptor. This will ensure compatibility between versions.

Example:
Correct reference:
stxx.layout.panels["\u200c"+"Aroon"+"\u200c"+" (14)"];
Incorrect reference:
stxx.layout.panels["Aroon(14)"];

See CIQ.Studies.addStudy for more details

Type:
  • object
Default Value:
  • {}

layout[`periodicity`] :number

READ ONLY. Number of periods per interval/timeUnit

See the Periodicity and Quote feed tutorial.

Type:
  • number
Default Value:
  • 1

layout[`studies`] :object

READ ONLY. List of study descriptors for the active studies on the chart.

Please note: To facilitate study name translations, study names use zero-width non-joiner (unprintable) characters to delimit the general study name from the specific study parameters. Example: "\u200c"+"Aroon"+"\u200c"+" (14)". At translation time, the library will split the text into pieces using the ZWNJ characters, parentheses and commas to just translate the required part of a study name. For more information on ZWNJ characters see: Zero-width_non-joiner. Please be aware of these ZWNJ characters, which will now be present in all study names and corresponding panel names; including the layout.studies study keys. Affected fields in the study descriptors could be id , display, name and panel.
To prevent issues, always use the names returned in the study descriptor. This will ensure compatibility between versions.

Example:
Correct reference:
stxx.layout.studies["\u200c"+"Aroon"+"\u200c"+" (14)"];
Incorrect reference:
stxx.layout.studies["Aroon (14)"];

See CIQ.Studies.addStudy for more details

Type:
  • object
Default Value:
  • {}

layout[`timeUnit`] :string

READ ONLY. Time unit for the interval.

Note that internal timeUnit format will differ from API parameters used in CIQ.ChartEngine#setPeriodicity and CIQ.ChartEngine#loadChart.

See the Periodicity and Quote feed tutorial. Available options are:

  • "millisecond"
  • "second"
  • "minute"
  • null for "day", "week", "month" periodicity
Type:
  • string

longHoldTime :number

Time in MS to trigger a longholdEventListener on the chart.

Type:
  • number
Default Value:
  • 700
Example

Add a "longhold" event listener.

stxx.longHoldTime = ... // Optionally override default value of 700ms.
stxx.addEventListener("longhold", function(lhObject) {
    CIQ.alert("longhold event at x: " + lhObject.x + " y: " + lhObject.y);
});

mainSeriesRenderer :CIQ.Renderer

READ ONLY. Access the renderer controlling the main series.

Type:

manageTouchAndMouse :boolean

If true when the chart initially is rendered, then the CIQ.ChartEngine object will register to listen and manage touch and mouse browser events within then canvas by attaching them to the container div.

Set to false, and all interactivity with the chart will cease; turning it into a static display and 'shedding' all HTML overlays and events required for user interaction, for a much more lightweight interface. Alternatively you can selectively set any CIQ.ChartEngine.htmlControls id to null, including CIQ.ChartEngine.htmlControls=null to disable them all.

See the Creating Static Charts tutorial for more details.

It is possible to re-enable the events after the chart has been rendered, but you must call stx.initializeChart(); stx.draw(); to register the events once again.

Type:
  • boolean
Default Value:
  • true
Example
// if enabling events after the chart was already rendered, you must reinitialize to re register the browser events.
stxx.manageTouchAndMouse = true;
stxx.initializeChart();
stxx.draw();

markerDelay :number

Only reposition markers this many milliseconds. Set to null for no visible delay. Set to 0 for a Zero Delay timeout. (lower numbers are more CPU intensive). See Markers for more details on adding markers to your charts

Type:
  • number
Example
stxx.markerDelay = 25;

markers :object

READ ONLY. A map of marker objects, sorted by label.

Type:
  • object

maxDataSetSize :number

Set a maximum size for the dataSet to prevent it from growing excessively large.

Once the max number of records have been loaded, pagination requests will be ignored and older data will be dropped from the end (historical) side of the dataSet array as new bars arrive, until that number is increased.

Set to 0 to let it grow forever.

Type:
  • number
Default Value:
  • 20000

maximumCandleWidth :number

Maximum candleWidth (in pixels) allowed when zooming in. Determines the minimum number of ticks to display on the chart.

Also see CIQ.ChartEngine#minimumCandleWidth

Use CIQ.ChartEngine#minimumZoomTicks to set the minimum number of ticks that must remain on the chart during a zoom-in operation.

Type:
  • number
Since:
  • 7.4.0
  • 8.4.0 Changed default to 100
Default Value:
  • 100

maxMasterDataSize :number

Set a maximum size for masterData to prevent it from growing excessively large.

Once the max number of records have been loaded, pagination requests will be ignored and older data will be dropped from the end (historical) side of the masterData array as new bars arrive, until that number is increased.

By default (set to 0) masterData is unlimited and will grow forever.

Note: when rolling up data due to periodicity, you should anticipate large enough masterData to accomodate the desired chart length.

Type:
  • number
Since:
  • 3.0.0


minimumCandleWidth :number

Minimum candleWidth (in pixels) allowed when zooming out. Determines the maximum number of ticks to display on the chart.

Also see CIQ.ChartEngine#maximumCandleWidth

Use CIQ.ChartEngine#minimumZoomTicks to set the minimum number of ticks that must remain on the chart during a zoom-in operation.

When candleWidth<1 and CIQ.ChartEngine.Chart#lineApproximation true, will create approximation of a line chart to improve rendering performance. Regardless, anything smaller than 0.3 pixels may cause performance issues when zooming out.

Type:
  • number
Default Value:
  • 1

minimumLeftBars :number

Number of bars to always keep in view when the user pans forwards or backwards. If this is set to less than 1, it will be possible to have a blank chart.

See CIQ.ChartEngine.Chart#allowScrollPast and CIQ.ChartEngine.Chart#allowScrollFuture for instructions on how to prevent users from scrolling past the last bar on the chart in either direction; which may supersede this setting.

Type:
  • number
Since:
  • 05-2016-10

Default Value:
  • 1

minimumZoomTicks :number

Set to the number of ticks that must remain on the chart when zooming in.

Use CIQ.ChartEngine#minimumCandleWidth to set the minimum number of ticks that must remain on the chart during a zoom-out operation.

Type:
  • number
Since:
  • 07-2016-16.6

Default Value:
  • 9

mouseWheelAcceleration :boolean

Set to false to turn off mousewheel acceleration effect; which depending on initial gesture speed, slowly slows down zooming as you let go of the wheel/pad.

Type:
  • boolean
Since:
  • 2015-11-1

Default Value:
  • true

noWicksOnCandles :object

chart types which do not draw wicks on candles

Type:
  • object
Default Value:
  • {"renko":true,"linebreak":true}

overlays :object

READ ONLY. An array of currently enabled overlay studies

Type:
  • object

overXAxis :boolean

READ ONLY. Toggles to true if the mouse cursor is over the X Axis.

Type:
  • boolean

overYAxis :boolean

READ ONLY. Toggles to true if the mouse cursor is over the Y Axis.

Type:
  • boolean

panels :object

READ ONLY. An array of currently enabled panels

Type:
  • object

pinchingScreen :boolean

READ ONLY. Toggles to true when the screen is being pinched

Type:
  • boolean

preferences :object

Contains the chart preferences.

Preferences parameters, unless otherwise indicated, can be set at any time and only require a draw() call to activate.

See importPreferences and exportPreferences for methods to serialize and restore previously saved preferences.

Type:
  • object

preferences[`currentPriceLine`] :boolean

Draw a horizontal line at the current price. Only drawn if the most recent tick is visible.

See CIQ.ChartEngine.AdvancedInjectable#drawCurrentHR

Type:
  • boolean
Since:
  • 05-2016-10


preferences[`dragging`] :object|boolean

Disables dragging a plot between panels or a y-axis within a panel. Separate switches are provided for dragging studies, series, or axes. Alternatively, all dragging may be disabled by setting dragging: false.

To also disable the highlight when hovering over the Y axis, add the following:

CIQ.ChartEngine.YAxis.prototype.setBackground = function() {}

To also disable the highlight when hovering over the Y axis, add the following:

CIQ.ChartEngine.YAxis.prototype.setBackground = function() {}
Type:
  • object | boolean
Since:
  • 7.1.0

Default Value:
  • {"series":true,"study":true,"yaxis":true}
Examples
stxx.preferences.dragging.study = false;
stxx.preferences.dragging = false;

preferences[`drawings`] :object

When using drawing tools, this will become an object when user saves the drawing parameters. A sub-object is created for each drawing tool. These preferences are used whenever the user selects that drawing object, and overrides the default stxx.currentVectorParameters. Use CIQ.Drawing.saveConfig to save the parameters to this object.

Type:
  • object
Since:
  • 6.0.0


preferences[`highlightsRadius`] :number

Pixel radius for the invisible intersection box around the cursor used to determine if it has intersected with an element to be highlighted. This value is used primarily for non-touch cursor events (mouse, touchpad). Used on items removed with a right click such as series and drawings.

Only applicable if the user has not tapped on the screen to set the location of the cross-hair.

Type:
  • number
Since:
  • 3.0.0

Default Value:
  • 10

preferences[`highlightsTapRadius`] :number

For touch events on the chart canvas. Pixel radius for the invisible intersection box around the cursor used to determine if it has intersected with an element to be highlighted. The larger highlight radius is more suitable for the less precise input from touch events. Used on items removed with a right click such as series and drawings.

Only applicable for touch events while the cursor is not controlling the crosshair tool. Otherwise, highlightsRadius is used.

Type:
  • number
Since:
  • 3.0.0

Default Value:
  • 30

preferences[`horizontalCrosshairField`] :string

Locks the crosshair y-coordinate to the value of the field name specified for the tick under the cursor on the primary chart.

For studies, create a horizontalCrosshairFieldFN function that will be called by CIQ.Studies.addStudy. The function must return the field name in the data set to reference. The function will not be called when the study is set to overlay or underlay the chart's panel.

Type:
  • string
Since:
  • 04-2016-08

Examples
// Have the crosshairs lock to the "Close" field of the tick under the cursor.
stxx.preferences.horizontalCrosshairField = "Close";
// Have the crosshair slock to the "ATR ATR (14)" field for a ATR study with a period of 14.
CIQ.Studies.studyLibrary["ATR"].horizontalCrosshairFieldFN = function (stx, sd) {
	// Returns the field name, which should be created by the study's "calculateFN".
	return "ATR " + sd.name;
};

preferences[`labels`] :boolean

Set to true to display labels on y-axis for line based studies using CIQ.Studies.displayIndividualSeriesAsLine or CIQ.Studies.displaySeriesAsLine (this is overridden by the particular y-axis setting of CIQ.ChartEngine.YAxis#drawPriceLabels). This flag is checked inside these 2 functions to decide if a label should be set, as such if you do not wish to have a label on a particular study line, you can set this flag to false, before calling the function, and then back to true.

Type:
  • boolean
Default Value:
  • true
Example
//do not display the price labels for this study
stxx.preferences.labels = false;
CIQ.Studies.displaySeriesAsLine(stx, sd, quotes);

//restore price labels to default value
stxx.preferences.labels = true;

preferences[`language`] :string

Stores preferred language for the chart.

It can be individually restored using CIQ.I18N.setLanguage and activated by CIQ.I18N.translateUI

Type:
  • string
Since:
  • 4.0.0


preferences[`magnet`] :boolean|number

Magnetizes the crosshairs to data points during drawing operations to improve initial placement accuracy.

  • When true, the magnet is considered "strong" and will always magnetize.
  • When a number, it is considered "weak" and will only magnetize within the area of defined. The radius of the circle is the number you set.

We recommend 75 as the value for the parameter when the number type is used.

It will not be used when an existing drawing is being repositioned.

See CIQ.ChartEngine.AdvancedInjectable#magnetize for more details.

Type:
  • boolean | number
Since:
  • 7.2.0 Magnets can now be applied to any series or study.


preferences[`timezone`] :string

Stores the preferred timezone for the display of the x axis labels.

It is automatically set and can be individually restored by CIQ.ChartEngine#setTimeZone.

Type:
  • string
Since:
  • 4.0.0


preferences[`whitespace`] :number

Initial whitespace on right of the screen in pixels.

Type:
  • number
Default Value:
  • 50
Example
// override the default value at declaration time
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	preferences: { whitespace: 20 },
});

preferences[`zoomAtCurrentMousePosition`] :boolean

If set to 'true', the mouse wheel zooming is centered by the mouse position.

Type:
  • boolean
Since:
  • 4.0.0


preferences[`zoomInSpeed`] :number

zoom-in speed for mousewheel and zoom button.

Range: 0 -.99999. The closer to 1 the slower the zoom.

Type:
  • number
Since:
  • 07/01/2015

Examples
stxx.preferences.zoomInSpeed = 0.91;
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	preferences: { zoomInSpeed: 0.98 },
});

preferences[`zoomOutSpeed`] :number

zoom-out speed for mousewheel and zoom button.

Range: 1-2. The closer to 1 the slower the zoom.

Type:
  • number
Since:
  • 07/01/2015

Examples
stxx.preferences.zoomOutSpeed = 1.1;
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	preferences: { zoomOutSpeed: 1 },
});

resizeDetectMS :number

Set to zero to avoid resize checking loop. See CIQ.ChartEngine#setResizeTimer for more details

Type:
  • number
Default Value:
  • 1000

reverseMouseWheel :boolean

Set to true to reverse direction of mousewheel for zooming

Type:
  • boolean

singleDrawingHighlight :boolean

Set to true to have drawings highlight only the last applied drawing if more than one is intersected at a time.

Type:
  • boolean
Since:
  • 5.0.0

Default Value:
  • true

soloPanelToFullScreen :boolean

Set this to true to hide even the chart panel when soloing a non-chart panel. Normally chart panels are not hidden when soloing.

Type:
  • boolean
Since:
  • 3.0.7

Example
stxx.soloPanelToFullScreen = true;

standaloneBars :object

Chart types whose bars represent a stand-alone entity as opposed to a vertex in a line-type chart. This is important when the engine tries to render the data points right off the chart; in a stand-alone bar, the points right off the chart need not be considered.

Type:
  • object
Since:
  • 4.0.0

Default Value:
  • {"enumerable":true,"get":"","set":""}

startComparisonsAtFirstVisibleBar :boolean

Comparisons by default start at the close value of the previous bar. Set this to true to start at the current bar instead.

Type:
  • boolean
Since:
  • 7.3.0


staticRange :boolean

When set to true, the requested range will be visually preserved between symbol changes or when a layout is imported, even if the data required to fill the left and/or right side of the x axis is not present.

This behavior is similar to setting goIntoPast and goIntoFuture when calling setRange/setSpan explicitly.

Please note that at the moment, a range will not be preserved when using addSeries, if the new data extends further than the currently loaded data for the primary instrument. For this, you will need to manually call setRange/setSpan in the addSeries callback.

Type:
  • boolean
Since:
  • 5.1.2


staticRangePeriodicityMap :array

Map of default values to be used to statically set periodicity (candle width) upon range selection when using CIQ.ChartEngine#setRange

Default Value:

[
    {
        rangeInMS : CIQ.WEEK,	// Any range less than a week, load 5 minute bars
        periodicity : 1,
        interval : 5,
        timeUnit : 'minute'
    },
    {
        rangeInMS : CIQ.MONTH,	// Any range less than a month, load 30 minute bars
        periodicity : 1,
        interval : 30,
        timeUnit : 'minute'
    },
    {
        rangeInMS : CIQ.YEAR,	// Any range less than a year, load day bars
        periodicity : 1,
        interval : "day"
    },
    {
        rangeInMS : CIQ.DECADE,	// Any range less than 10 years, load weekly bars
        periodicity : 1,
        interval : "week"
    },
    {
        rangeInMS : CIQ.DECADE * 10,	// Any range less than a century, load monthly bars
        periodicity : 1,
        interval : "month"
    },
    {
        rangeInMS : Number.MAX_VALUE,	// Anything greater than a century, load yearly bars
        periodicity : 12,
        interval : "month"
    }
]
Type:
  • array
Since:
  • m-2016-12-01


streamParameters :object

Used to control the behavior and throttling of real time updates in updateChartData() to prevent overloading the chart engine

Type:
  • object
Example
// this will cause updates to be applied to the dataSegment immediately
stxx.streamParameters.maxTicks = 0;

// here is how you would override all options
stxx.streamParameters = { maxWait: 1000, maxTicks: 100 };

streamParameters[`maxTicks`] :number

ticks to wait before allowing update to occur (if this condition is met, the update will occur and all pending ticks will be loaded - exclusive of maxWait)

Type:
  • number
Default Value:
  • 100
Example
// update with every new tick added.
stxx.streamParameters.maxTicks = 0;

streamParameters[`maxWait`] :number

ms to wait before allowing update to occur (if this condition is met, the update will occur and all pending ticks will be loaded - exclusive of maxTicks)

Type:
  • number
Default Value:
  • 1000
Example
// update without any time interval delay.
stxx.streamParameters.maxWait = 0;

styles :object

Object that stores the styles used by the chart.

Type:
  • object

tapForHighlighting :boolean

If true (the default), requires a tap on a drawing, plot, y-axis, or other object before the object is highlighted. If false, allows highlighting of objects when the mouse cursor moves over the objects.

Type:
  • boolean
Since:
  • 8.2.0

Default Value:
  • true

transformDataSetPost :function

Register this function to transform the data set after a createDataSet() event; such as change in periodicity. You can also explicitly call stxx.createDataSet(); stxx.draw(); to trigger this function.

Expected Format :

	fc(stxChart, dataSet, min low price in the dataset, max high price in the dataset);
Type:
  • function
Example
stxx.transformDataSetPost = function (self, dataSet, min, max) {
	for (var i = 0; i < dataSet.length; i++) {
		// do something to the dataset here
	}
};

transformDataSetPre :function

Register this function to transform the data set before a createDataSet() event; such as change in periodicity. You can also explicitly call stxx.createDataSet(); stxx.draw(); to trigger this function.

Expected Format :

	fc(stxChart, dataSet);
Type:
  • function
Example
stxx.transformDataSetPre = function (stxx, dataSet) {
	for (var i = 0; i < dataSet.length; i++) {
		// do something to the dataset here
	}
};

translationCallback :function

This is the callback function used to translate languages. Should return a translated phrase given the English phrase. See separate translation file for list of phrases.

Expected format :

	var translatedWord = fc(english);

Defaults to CIQ.I18N.translate

Type:
  • function

useBackgroundCanvas :boolean

READ ONLY. Flag that specifies whether the background canvas should be used to draw grid lines and axes. This flag is set to true when the canvasShim contains child elements. The canvasShim is the background canvas — an HTML container behind the main chart canvas.

Check this flag to determine whether the canvasShim is being used to create background drawings.

Type:
  • boolean
Since:
  • 7.4.0

See:

useBackingStore :boolean

When set to true, the backing store for the canvas is used. This results in crisper display but with a noticeable performance penalty in some browsers. The default is true. If improved performance is necessary, set the variable as shown in the example. The example allows mobile devices (android/ipad/iphone) to continue using the backing store while being bypassed in others (desktop browsers).

Type:
  • boolean
Since:
  • 3.0.0

Default Value:
  • true
Example
stxx.useBackingStore = CIQ.isMobile;

xAxisAsFooter :boolean

Set to true to display the xAxis below all panels. By default, the x axis will be rendered right under the main chart panel.

Type:
  • boolean
Since:
  • 05-2016-10
  • 4.1.0 Now defaults to true.
  • 5.2.0 Vertical grid lines in study panels no longer dependent on this property and will be always displayed.
Default Value:
  • true

xaxisHeight :boolean

Sets the x axis height in pixels.

  • Set to null to automatically adjust to the size of the axis font.
  • Set to 0 completely remove the x axis.
  • Use CIQ.ChartEngine.XAxis#noDraw to temporarily hide the axis, but maintain its spacing.
  • Setting to a value able to accommodate two lines of text will create a two-line x-axis.
Type:
  • boolean
Since:
  • 8.4.0 Now defaults to 40px.

Default Value:
  • 40

yaxisLabelStyle :string

Shape of the floating y axis label.

Available options:

Type:
  • string
Default Value:
  • roundRectArrow
Example
var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });
stxx.yaxisLabelStyle = "roundRectArrow";

yTolerance :number

Number of pixels the mouse needs to move in vertical direction to "unlock" vertical panning/scrolling. Setting to a number larger than the pixels on the canvas will also disable vertical scrolling

Type:
  • number
Default Value:
  • 100
Example
//This will disable the tolerance, so panning will immediately follow the user actions without maintaining a locked vertical location when panning left or right.
var stxx = new CIQ.ChartEngine({
	container: document.querySelector(".chartContainer"),
	layout: { candleWidth: 16, crosshair: true },
});
stxx.yTolerance = 0;

Methods


chartShowsHighs(chartType)

Returns true if the chartType displays OHL data.

Parameters:
Name Type Description
chartType string

The chart type (layout.chartType)

Since:
  • 05-2016-10.1 "baseline_delta_mountain" and "colored_mountain" are also available.

Deprecated:
  • Yes
Returns:

True if the chart type only displays close values

Type
boolean

create( [params])

Convenience function that uses the configuration provided in params.config to create the chart engine, attach quote feeds, initialize add-ons, add event listeners, and load the chart.

Use this function to simplify chart creation when you have a well defined configuration object. A default configuration object can be obtained from defaultConfiguration.js (in the js folder of your library).

Note: You can also create a chart without using this function. For example, create the chart engine by instantiating CIQ.ChartEngine. Attach quote feeds with CIQ.ChartEngine#attachQuoteFeed. Instantiate add-ons such as CIQ.Tooltip and CIQ.InactivityTimer to add them to the chart engine. Add event listeners with CIQ.ChartEngine#addEventListener. Load the chart with CIQ.ChartEngine#loadChart.

Parameters:
Name Type Argument Description
params object <optional>

Function parameters.

Properties
Name Type Argument Description
container HTMLElement <optional>

The HTML element in which the chart engine is created.

config object <optional>

Contains configuration specifications.

Properties
Name Type Argument Description
chartEngineParams object <optional>

Parameters required by the CIQ.ChartEngine constructor except for a reference to the container HTML element, which is provided by params.container, for example:

{
    layout: {
        "chartType": "candle",
        "crosshair": true,
        "candleWidth": 30,
        "periodicity": 1,
        "interval": 'day',
    },
    preferences: {
        "currentPriceLine": true,
        "whitespace": 100
    },
    chart: {
        yAxis: {
          position: 'left'
        }
    }
}
quoteFeeds object <optional>

Array of quote feed objects to attach to the chart engine.

marketFactory object <optional>

Market factory object. When not provided, CIQ.Market.Symbology.factory is used if available.

addOns object <optional>

Initialization properties for add-ons.

chartId string <optional>

Identifies the chart created by the chart engine.

onChartReady function <optional>

A callback function to call when the chart has been loaded.

callbacks object <optional>

Event listeners to add to the chart engine. Use this parameter to replace the default listeners for layout, symbolChange, drawing, preferences, and newChart. Note: Other event listeners can be added to the chart engine using this parameter, but the recommended approach for listeners other than the defaults is to use CIQ.ChartEngine#addEventListener.

Properties
Name Type Argument Description
layout function <optional>

Event listener that replaces the default implementation provided by getSaveLayout.

symbolChange function <optional>

Event listener that replaces the default implementation provided by getSaveLayout.

drawing function <optional>

Event listener that replaces the default implementation provided by getSaveDrawings.

preferences function <optional>

Event listener that replaces the default implementation provided by getSavePreferences.

newChart function <optional>

Event listener that replaces the default implementation provided by getRetoggleEvents.

initialData object <optional>

Initial data to show on the chart.

restore boolean <optional>

True if storage is to be used.

deferLoad boolean <optional>

If true, the chart is created but not loaded.

Since:
  • 7.5.0
  • 8.0.0 Renamed from CIQ.UI.Chart#createChart. Revised parameter list from (container, config = {}).
Returns:

A reference to a new chart engine.

Type
CIQ.ChartEngine

getRetoggleEvents( [config])

Returns a callback function that restores the state of the chart markers.

Parameters:
Name Type Argument Description
config object <optional>

Configuration parameters.

Properties
Name Type Argument Description
chartId string <optional>

Identifies the chart for which the state of the markers is restored.

selector.markersMenuItem string <optional>

A CSS selector used to obtain references to the DOM nodes that represent the marker radio buttons in the chart user interface. The DOM nodes can be used to invoke the radio button event listeners to turn the markers on and off. See js/defaultConfiguration.js for an example of this parameter.

Since:
  • 7.5.0
  • 8.0.0 Renamed from CIQ.UI.Chart#retoggleEvents. Revised parameter list from ({ stx }). Now returns a function.
Returns:

A callback function that restores the state of the chart markers. The returned function is typically assigned to newChartEventListener.

Type
function

getSaveDrawings( [config])

Returns a callback function that saves the state of chart drawings. Uses an instance of CIQ.NameValueStore if one is available; otherwise, saves the state of the drawings in local storage.

Note: You can also serialize the state of chart drawings using CIQ.ChartEngine#exportDrawings.

Parameters:
Name Type Argument Description
config object <optional>

Configuration parameters.

Properties
Name Type Argument Description
chartId string <optional>

Identifies the drawings in local storage for a specific chart.

restore boolean <optional>

Indicates whether the chart drawings are restorable. If false, the returned callback function does not save the chart drawings.

Since:
  • 7.5.0
  • 8.0.0 Renamed from CIQ.UI.Chart#getSaveDrawings.
Returns:

A callback function that saves the state of the chart drawings. The returned callback function is typically added to the chart engine as a drawingEventListener.

Type
function

getSaveLayout( [config])

Returns a callback function that saves chart layout information. Uses an instance of CIQ.NameValueStore if one is available; otherwise, saves the layout information to local storage.

Note: You can also serialize the chart layout using CIQ.ChartEngine#exportLayout.

Parameters:
Name Type Argument Description
config object <optional>

Configuration parameters.

Properties
Name Type Argument Description
chartId string <optional>

Identifies the layout in local storage for a specific chart.

restore boolean <optional>

Indicates whether the layout is restorable. If false, the returned callback function does not save the chart layout.

Since:
  • 7.5.0
  • 8.0.0 Renamed from CIQ.UI.Chart#getSaveLayout.
Returns:

A callback function that saves the chart layout in local storage. The returned callback function is typically added to the chart engine as a layoutEventListener or symbolChangeEventListener.

Type
function

getSavePreferences( [config])

Returns a callback function that saves the chart preferences. Uses an instance of CIQ.NameValueStore if one is available; otherwise, saves the preferences in local storage.

Note: You can also capture chart preferences using CIQ.ChartEngine#exportPreferences.

Parameters:
Name Type Argument Description
config object <optional>

Configuration parameters.

Properties
Name Type Argument Description
chartId string <optional>

Identifies the preferences in local storage for a specific chart.

restore boolean <optional>

Indicates whether the chart preferences are restorable. If false, the returned callback function does not save the chart preferences.

Since:
  • 7.5.0
  • 8.0.0 Renamed from CIQ.UI.Chart#savePreferences. Revised parameter list from ({ stx }). Now returns a function.
Returns:

A callback function that saves the chart preferences. The returned callback function is typically added to the chart engine as a preferencesEventListener.

Type
function

handleContextMenu( [e])

This code prevents the browser context menu from popping up when right-clicking on a drawing or overlay.

See rightClickEventListener.

Parameters:
Name Type Argument Default Description
e object <optional>
event

Event

Returns:
Type
boolean

hideDates()

Deprecated Use CIQ.ChartEngine.XAxis#noDraw and CIQ.ChartEngine.YAxis#noDraw instead.

Override this function to hide the date which floats along the X axis when crosshairs are enabled. Return true to hide the date or false to display.

Deprecated:
  • as of 6.0.0 no longer used in library.


isDailyInterval(interval)

Determines whether the internal chart periodicity is based on a daily interval ("day", "week" or "month").

Note: This function is intended to be used on the internal periodicity as stored in CIQ.ChartEngine#layout.

Parameters:
Name Type Description
interval string

The internal chart periodicity for which the interval is determined.

See:
Returns:

True if the internal chart periodicity is a daily interval; otherwise, false.

Type
boolean

restoreDrawings(stx, symbol [, id])

Restores the chart drawings from CIQ.NameValueStore if an instance is available; otherwise, restores the drawings from local storage.

Note: You can also restore saved chart drawings using CIQ.ChartEngine#importDrawings.

Parameters:
Name Type Argument Description
stx CIQ.ChartEngine

A reference to the chart engine.

symbol string

The chart symbol. Used along with id to identify the chart drawings in local storage.

id string <optional>

The local storage identifier for the saved drawings. See getSaveDrawings.

Since:
  • 7.5.0
  • 8.0.0 Renamed from CIQ.UI.Chart#restoreDrawings.

restoreLayout(stx, cb, id)

Restores the chart layout from CIQ.NameValueStore if an instance is available; otherwise, restores the layout from local storage.

Note: You can also restore the chart layout using CIQ.ChartEngine#importLayout and CIQ.ChartEngine#importDrawings.

Parameters:
Name Type Description
stx CIQ.ChartEngine

A reference to the chart engine.

cb function

A callback function to be called when restoration of the layout is complete.

id string

The local storage identifier for the saved chart layout. See getSaveLayout.

Since:
  • 7.5.0
  • 8.0.0 Renamed from CIQ.UI.Chart#restoreLayout.

restorePreferences(stx [, id])

Restores the chart preferences from CIQ.NameValueStore if an instance is available; otherwise, restores the preferences from local storage.

Note: You can also restore the chart preferences using CIQ.ChartEngine#importPreferences.

Parameters:
Name Type Argument Description
stx CIQ.ChartEngine

A reference to the chart engine.

id string <optional>

The local storage identifier for the saved chart preferences. See getSavePreferences.

Since:
  • 7.5.0
  • 8.0.0 Renamed from CIQ.UI.Chart#restorePreferences.

activateDrawing(drawingTool [, panel])

Activate a drawing. The user can then finish the drawing.

Note: Some drawings labeled "chartsOnly" can only be activated on the chart panel.

Parameters:
Name Type Argument Description
drawingTool string

The tool to activate. Send null to deactivate.

panel CIQ.ChartEngine.Panel <optional>

The panel where to activate the tool. Defaults to the current panel.

Since:
  • 3.0.0
  • 7.0.0 panel defaults to the current panel.
Returns:

Returns true if the drawing was successfully activated. Returns false if unactivated or unsuccessful.

Type
boolean

activateRepositioning(drawing)

Activates or deactivates repositioning on a drawings.

Parameters:
Name Type Description
drawing CIQ.Drawing

The drawing to activate. null to deactivate the current drawing.

Since:
  • 3.0.0


addEventListener(type, callback)

Registers a listener for a chart event in the chart engine instance.

Events are tracked in the CIQ.ChartEngine.callbackListeners object, which is READ ONLY and should never be manually altered.

Valid event types and listeners:

Parameters:
Name Type Description
type string | Array.<string>

One or more event types to listen for. See the description above for valid types.

callback function

The listener to call when the event or events specified by type are triggered. Accepts an object argument containing properties specified in the event listener definition.

Since:
  • 04-2016-08
  • 4.0.0 Added "doubleTap".
  • 4.0.0 Type can be an array of event options.
  • 6.3.0 Added "scroll".
  • 7.0.0 Added "preferences" and "drawingEdit".
  • 8.1.0 Added "periodicity".
  • 8.2.0 Added "notification" and "floatingWindow".
Returns:

An object containing type and callback. The object can be passed to CIQ.ChartEngine#removeEventListener to remove the listener.

Type
object
Examples

Add a "longhold" event listener.

stxx.longHoldTime = ... // Optionally override default value of 700ms.
stxx.addEventListener("longhold", function(lhObject) {
    CIQ.alert("longhold event at x: " + lhObject.x + " y: " + lhObject.y);
});

Add a "tap" listener that provides location and details when a series is clicked or tapped.

stxx.addEventListener("tap", function (tapObject) {
	if (this.anyHighlighted) {
		for (let n in this.chart.seriesRenderers) {
			let r = this.chart.seriesRenderers[n];
			for (let j = 0; j < r.seriesParams.length; j++) {
				series = r.seriesParams[j];
				if (series.highlight) {
					let bar = this.barFromPixel(tapObject.x);
					if (this.chart.dataSegment[bar]) {
						// Replace console.log with your required logic as needed.
						console.log("Tap event at pixel x: " + tapObject.x + " y: " + tapObject.y);
						console.log(
							"Price:",
							this.priceFromPixel(tapObject.y),
							" Date: ",
							this.chart.dataSegment[bar].DT
						);
						console.log("Series Details: ", JSON.stringify(series));
					}
				}
			}
		}
	}
});

addSeries( [id] [, parameters] [, cb])

INJECTABLE

Adds a series of data to the chart.

A series can be rendered (for instance like a comparison chart) or it can be hidden (for instance to drive a study).

If you have a quotefeed attached to your chart, then just pass the symbol as the first parameter. There is no need to pass data since the chart will automatically fetch it from your quotefeed. If however you are using the "push" method to feed data to your chart then you must provide the data manually by passing it as a parameter.

Here's how you would add a hidden series for symbol "IBM" when using a quotefeed:

stxx.addSeries("IBM");

That series will now be available for use by studies, for example, but it will not display on the chart since no rendering details have been provided.

If you wish to display your series, you must specify how you wish the series to be rendered. At a minimum, you will need to indicate what color should be used to display the series. Like so:

stxx.addSeries("IBM", {color:"blue"});

Once a series is added, it will be tracked in the CIQ.ChartEngine.Chart#series object.

To remove a series call CIQ.ChartEngine#removeSeries

To remove all series from a chart, simply iterate through the active series object and delete them one at a time:

for(var s in stxx.chart.series){
   var series=stxx.chart.series[s];
   stxx.removeSeries(series);
}

Example 1 - manually add data to a chart and a series

The above example adds a series as an overlay, but a more common use case is to display series as comparisons. Comparisons are special because they change the chart from a price chart to a percentage chart. All series on the chart then begin at "zero", on the left side of the chart. Set isComparison=true when adding a series to make it a comparison chart. As long as a comparison series is on a chart, the chart will display its y-axis in percent scale provided CIQ.ChartEngine.Chart#forcePercentComparison is true.

stxx.addSeries("IBM", {color:"blue", isComparison:true});

Complex Visualizations

Example 2 - use a custom renderer to display a series

Behind the scenes, series are displayed by renderers. Renderers can plot lines, mountains, bars, candles, and other types of visualizations. +* When adding a series, you can specify which renderer to use and set parameters to control your visualization. For instance, this will display a series as a bar chart on its own left axis:

stxx.addSeries(
		"SNE",
		{
			display:"Sony",
			renderer:"Bars",
			name:"test",
			yAxis:{
				position:"left",
				textStyle:"#FFBE00"
			}
		}
);

Which is the same as explicitly declaring a renderer and then attaching it to the series:

stxx.addSeries(
		"SNE",
		{
			display:"Sony"
		},
		function(){
			// create the axis
			var axis=new CIQ.ChartEngine.YAxis({position:"left", textStyle:"#FFBE00"});

			//create the renderer and attach
			var renderer=stxx.setSeriesRenderer(
				new CIQ.Renderer.Bars({params:{name:"test", yAxis:axis}})
			);
			renderer.attachSeries("SNE").ready();
		}
);

The above 2 calls do exactly the same thing, just using different syntax.

All parameters specified in addSeries will be passed on to the selected renderer. As such, every parameter available for the selected renderer can be used here to further customize the series.
For example, to add a step line, you would select a Lines renderer, and then set its step attribute, right trough the addSeries API call.

stxx.addSeries(
		"SNE",
		{
			renderer:"Lines",
			step:true,
		}
);

Advanced Visualizations

Some renderers are capable of rendering multiple series. For instance, the Histogram can display series stacked on top of one another. Use setSeriesRenderer() in this case. Here is how we would create a stacked histogram from several series:

var myRenderer=stxx.setSeriesRenderer(new CIQ.Renderer.Histogram({params:{subtype:"stacked"}}));

stxx.addSeries("^NIOALL", {},
		function() {myRenderer.attachSeries("^NIOALL","#6B9CF7").ready();}
);
stxx.addSeries("^NIOAFN", {},
		function() {myRenderer.attachSeries("^NIOAFN","#95B7F6").ready();}
);
stxx.addSeries("^NIOAMD", {},
		function() {myRenderer.attachSeries("^NIOAMD","#B9D0F5").ready();}
);

Example 3 - advanced stacked histogram renderer

Using a Symbol Object

The above examples all assumed your chart uses "tickers" (stock symbols). We refer to complex (compound) symbols as "Symbol Objects" (see CIQ.ChartEngine#loadChart). Here's how to set a series with a symbol object:

stxx.addSeries(null, {color:"blue", symbolObject:yourSymbolObject});

Setting a separate YAxis

By default, series are displayed without a y-axis. They are either "overlayed" on the main chart, or if they are comparisons then they share the standard y-axis. But a series can also take an optional y-axis which can be displayed on the left, or the right side of the chart. To do this, you must specify parameters for a YAxis object and pass to addSeries:

stxx.addSeries("IBM", {color:"blue", yAxis:{ position:"left" }});

Understanding the relationship between setSeriesRenderer() and importLayout

It is important to know that a renderer explicitly created using setSeriesRenderer() will not be stored in the layout serialization. If your implementation will require the complete restoration of a chart layout, you must instead use the syntax that includes all of the renderer parameters as part of this addSeries call.

Parameters:
Name Type Argument Description
id string <optional>

The name of the series. If not passed then a unique ID will be assigned. (parameters.symbol and parameters.symbolObject will default to using id if they are not set explicitly and id is supplied.)

parameters object <optional>

Parameters to describe the series. Any valid attachSeries parameters and renderer parameters will be passed to attached renderers.

Properties
Name Type Argument Default Description
renderer string <optional>
CIQ.Renderer.Lines

Rendering Set to the desired renderer for the series.

  • If not set, defaults to Lines when color is set.
  • Not needed for hidden series.
name string <optional>

Rendering Set to specify renderer's name. Otherwise id will be used.

display string <optional>
id/symbol

Rendering Set to the text to display on the legend. If not set, the id of the series will be used (usually symbol). If id was not provided, will default to symbol.

symbol string <optional>
id

Data Loading The symbol to fetch in string format. This will be sent into the fetch() function, if no data is provided. If no symbol is provided, series will use the id as the symbol. If both symbol and symbolObject are set, symbolObject will be used.

symbolObject object <optional>
id

Data Loading The symbol to fetch in object format. This will be sent into the fetch() function, if no data is provided. If no symbolObject is provided, series will use the id as the symbol. You can send anything you want in the symbol object, but you must always include at least a 'symbol' element. If both symbol and symbolObject are set, symbolObject will be used.

field string <optional>
Close/Value

Data Loading Specify an alternative field to draw data from (other than the Close/Value). Must be present in your pushed data objects or returned from the quoteFeed.

isComparison boolean <optional>
false

Rendering If set to true, shareYAxis is automatically set to true to display relative values instead of the primary symbol's price labels. CIQ.ChartEngine#setComparison is also called and set to true. This is only applicable when using the primary Y axis, and should only be used with internal addSeries renderers.

shareYAxis boolean <optional>
false

Rendering

  • Set to true so that the series shares the primary Y-axis and renders along actual values and print its corresponding current price label on the y axis.
  • When set to false, the series will not be attached to a y axis. Instead it is superimposed on the chart; taking over its entire height, and maintaining the relative shape of the line. No current price will be displayed. Superimposing the ‘shape’ of one series over a primary chart, is useful when rendering multiple series that do not share a common value range.
  • This setting will automatically override to true if 'isComparison' is set.
  • This setting is only applicable when using the primary Y axis and has no effect when using a renderer that has its own axis.
marginTop number <optional>
0

Rendering Percentage (if less than 1) or pixels (if greater than 1) from top of panel to set the top margin for the series.
Note: this parameter is to be used on subsequent series rendered on the same axis. To set margins for the first series, CIQ.ChartEngine.YAxis#initialMarginTop needs to be used.
Note: not applicable if shareYAxis is set.

marginBottom number <optional>
0

Rendering Percentage (if less than 1) or pixels (if greater than 1) from the bottom of panel to set the bottom margin for the series.
Note: this parameter is to be used on subsequent series rendered on the same axis. To set margins for the first series, CIQ.ChartEngine.YAxis#initialMarginBottom needs to be used.
Note: not applicable if shareYAxis is set.

width number <optional>
1

Rendering Width of line in pixels

minimum number <optional>

Rendering Minimum value for the series. Overrides CIQ.minMax result.

maximum number <optional>

Rendering Maximum value for the series. Overrides CIQ.minMax result.

color string <optional>

Rendering Color used to draw the series line. Causes the line to immediately render an overlay. Only applicable for default or single-color renderers.

Must be an RGB, RGBA, or three- or six‑digit hexadecimal color number or CSS color keyword; for example, "rgb(255, 0, 0)", "rgba(255, 0, 0, 0.5)", "#f00", "#FF0000", or "red".

See CIQ.Renderer#attachSeries for additional color options.

baseColor string <optional>
parameters.color

Rendering Color for the base of a mountain series.

pattern array | string <optional>
'solid'

Rendering Pattern to draw line, array elements are pixels on and off, or a string e.g. "solid", "dotted", "dashed"

fillGaps boolean | string <optional>

Data Loading If CIQ.ChartEngine#cleanupGaps is enabled to clean gaps (not 'false'), you can use this parameter to override the global setting for this series.

  • If fillGaps not present
    • No gaps will be filled for the series.
  • If fillGaps is set to 'false'
    • No gaps will be filled for the series.
  • If fillGaps is set to 'true',
  • If fillGaps is set to 'carry' or 'gap'
    • Will use that filling method even if cleanupGaps is set differently.
gapDisplayStyle object | string <optional>
true

Rendering Defines how (or if) to render (style) connecting lines where there are gaps in the data (missing data points), or isolated datapoints.

  • Applicable for line-like renderers only (lines, mountains, baselines, etc).
  • Default:
    • true for standard series.
    • false for comparisons.
  • Set to true to use the color and pattern defined by CIQ.ChartEngine#setGapLines for the chart.
  • Set to false to always show gaps.
  • Set to an actual color string or custom color-pattern object as formatted by CIQ.ChartEngine#setGapLines to define more custom properties.
  • 'Dots' indicating isolated items will be shown unless a transparent color/style is specified.
  • If not set, and the series is a comparison, the gaps will always be rendered transparent.
fillStyle string <optional>

Rendering Fill style for mountain chart (if selected). For semi-opaque use rgba(R,G,B,.1). If not provided a gradient is created with color and baseColor.

permanent boolean <optional>
false

Rendering Set to true to activate. Makes series unremoveable by a user when attached to the default renderer. If explicitly linked to a renderer, see CIQ.Renderer#attachSeries for details on how to prevent an attached series from being removed by a user.

data object <optional>

Data Loading Data source for the series. If this field is omitted, the library will connect to the QuoteFeed (if available) to fetch initial data ( unless parameters.loadData is set to false), and manage pagination and updates. If data is sent in this field, it will be loaded into the masterData, but series will not be managed by the QuoteFeed (if available) for pagination or updates. Items in this array must be ordered from earliest to latest date.
Accepted formats:


Full OHLC:
An array of properly formatted OHLC quote object(s). See OHLC Data Format.

----

Price Only:
An array of objects, each one with the followng elements:

Properties
Name Type Argument Description
DT date <optional>

JavaScript date object or epoch representing data point (overrides Date parameter if present)

Date string <optional>

string date representing data point ( only used if DT parameter is not present)

Value number <optional>

value of the data point ( As an alternative, you can send parameters.data.Close since your quote feed may already be returning the data using this element name)

Close number <optional>

value of the data point ( Used as an alternative to parameters.data.Value)

panel string | boolean <optional>

Rendering The panel name on which the series should display. If the panel doesn't exist, one will be created. If true is passed, a new panel will also be created.

action string <optional>
'add-series'

Rendering Overrides what action is sent in symbolChange events. Set to null to prevent a symbolChange event.

loadData boolean <optional>
true

Data Loading Include and set to false if you know the initial data is already in the masterData array or will be loaded by another method. The series will be added but no data requested. Note that if you remove this series, the data points linked to it will also be removed which may create issues if required by the chart. If that is the case, you will need to manually remove from the renderer linked to it instead of the underlying series itself.

extendToEndOfDataSet boolean <optional>

Rendering Set to true to plot any gap at the front of the chart. Automatically done for step charts (set to false to disable) or if parameters.gapDisplayStyle are set (see CIQ.ChartEngine#addSeries)

displayFloatingLabel boolean <optional>
false

Rendering Set to false to disable the display of a Y-axis floating label for this series.

baseline boolean | object <optional>

Rendering If a boolean value, indicates whether the series renderer draws a baseline. If an object, must be the equivalent of CIQ.ChartEngine.Chart#baseline.

cb function <optional>

Callback function to be executed once the fetch returns data from the quoteFeed. It will be called with an error message if the fetch failed: cb(err);. Only applicable if no data is provided.

Since:
  • 04-2015 If isComparison is true shareYAxis is automatically set to true and setComparison(true) called. createDataSet() and draw() are automatically called to immediately render the series.
  • 15-07-01 If color is defined and chartStyle is not set then it is automatically set to "line".
  • 15-07-01 Ability to use setSeriesRenderer().
  • 15-07-01 Ability to automatically initialize using the quoteFeed.
  • 15-07-01 parameters.quoteFeedCallbackRefresh no longer used. Instead if parameters.data.useDefaultQuoteFeed is set to true the series will be initialized and refreshed using the default quote feed. (Original documentation: {boolean} [parameters.quoteFeedCallbackRefresh] Set to true if you want the series to use the attached quote feed (if any) to stay in sync with the main symbol as new data is fetched (only available in Advanced package).)
  • 2015-11-1 parameters.symbolObject is now available.
  • 05-2016-10 parameters.forceData is now available.
  • 09-2016-19 parameters.data.DT can also take an epoch number.
  • 09-2016-19 parameters.data.useDefaultQuoteFeed no longer used. If no parameters.data is provided the quotefeed will be used.
  • 3.0.8 parameters.forceData no longer used, now all data sent in will be forced.
  • 3.0.8 parameters.loadData added.
  • 4.0.0 Added parameters.symbol (string equivalent of parameters.symboObject).
  • 4.0.0 Multiple series can now be added for the same underlying symbol. parameters.field or parameters.symbolObject can be used to accomplish this.
  • 4.0.0 Added parameters.baseColor.
  • 5.1.0 Series data now added to masterData as an object. This allows storage of more than just one data point, facilitating OHLC series!
  • 5.1.0 addSeries will now create a renderer unless renderer, name and color parameters are all omitted.
  • 5.1.0 Now also dispatches a "symbolChange" event when pushing data into the chart, rather than only when using a quote feed.
  • 5.1.1 Added parameters.extendToEndOfDataSet.
  • 5.1.1 parameters.chartType, originally used to draw "mountain" series, has been deprecated in favor of the more flexible 'renderer' parameter. It is being maintained for backwards compatibility.
  • 5.2.0 parameters.gaps has been deprecated (but maintained for backwards compatibility) and replaced with parameters.gapDisplayStyle.
  • 6.0.0 parameters.fillGaps is now a string type and can accept either "carry" or "gap". Setting to true will use the value of stxx.cleanupGaps.
  • 6.2.0 No longer force 'percent'/'linear', when adding/removing comparison series, respectively, unless CIQ.ChartEngine.Chart#forcePercentComparison is true. This allows for backwards compatibility with previous UI modules.
  • 6.3.0 If a panel name is passed into the function, a new panel will be created if one doesn't already exist.
  • 6.3.0 Added parameters.displayFloatingLabel.
  • 8.1.0 Supports custom baselines. See example.
  • 8.2.0 Added parameters.baseline.
Returns:

The series object.

Type
object
Examples

Add a series overlay and display it as a dashed line.

stxx.addSeries("IBM", { color: "purple", pattern: [3, 3] });

Add a series onto the main axis and then create a moving average study that uses it.

// Note, this will work for any study that accepts a "Field" parameter.

stxx.addSeries("ge", { color: "yellow", shareYAxis: true }, function () {
	let inputs = {
		Period: 20,
		Field: "ge",
		Type: "ma",
	};
	let outputs = {
		MA: "red",
	};
	CIQ.Studies.addStudy(stxx, "ma", inputs, outputs);
});

Add series using a symbolObject which includes the data source key.

// This key will be sent into the fetch 'params' for use in your quoteFeed.
let mySymbol = { symbol: "GE", source: "realtimedb" };
let mySymbol2 = { symbol: "GDP", source: "fundamentaldb" };

stxx.addSeries(null, { color: "purple", symbolObject: mySymbol });
stxx.addSeries(null, { color: "green", symbolObject: mySymbol2 });

Set a custom field.

// The engine is smart enough to use the series symbol, or "Close" if the symbol doesn't exist in the returned data from your quotefeed
// but if you want to use any other field then you'll need to specify it like this.
stxx.addSeries("GE", { color: "purple", field: "Open" });

Add the comparison series with a color to immediately render using default renderer (as lines) and dashes for gaps fillers.

stxx.addSeries(symbol1, {
	display: "Description 1",
	isComparison: true,
	color: "purple",
	gapDisplayStyle: { pattern: [3, 3] },
	width: 4,
	permanent: true,
});
stxx.addSeries(symbol2, {
	display: "Description 2",
	isComparison: true,
	color: "pink",
	gapDisplayStyle: { pattern: [3, 3] },
	width: 4,
});
stxx.addSeries(symbol3, {
	display: "Description 3",
	isComparison: true,
	color: "brown",
	gapDisplayStyle: { pattern: [3, 3] },
	width: 4,
});

Add the series with only default parameters (no color).

// The series will not display on the chart after it is added,
// but the data will be available ready to be attached to a renderer.
stxx.addSeries(symbol1, { display: "Description 1" });
stxx.addSeries(symbol2, { display: "Description 2" });
stxx.addSeries(symbol3, { display: "Description 3" });

Add a series with a color to immediately render.

// It also calls callbackFunct after the data is returned from the fetch.
function callbackFunct(field) {
	return function (err) {
		CIQ.alert(field);
	};
}

stxx.addSeries(symbol1, { display: "Description", color: "brown" }, callbackFunct(symbol1));

Add a stacked historam with three series usng an external renderer.

// Note how the addSeries callback is used to ensure the data is present before the series is displayed.

// Configure the histogram display.
let params = {
	name: "Sentiment Data",
	subtype: "stacked",
	heightPercentage: 0.7, // How high to go. 1 = 100%
	opacity: 0.7, // Alternatively can use rgba values in histMap instead
	widthFactor: 0.8, // to control space between bars. 1 = no space in between
};

// Legend creation callback.
function histogramLegend(colors) {
	stxx.chart.legendRenderer(stxx, {
		legendColorMap: colors,
		coordinates: { x: 260, y: stxx.panels["chart"].yAxis.top + 30 },
		noBase: true,
	});
}

let histRenderer = stxx.setSeriesRenderer(
	new CIQ.Renderer.Histogram({ params: params, callback: histogramLegend })
);

stxx.addSeries("^NIOALL", { display: "Symbol 1" }, function () {
	histRenderer.attachSeries("^NIOALL", "#6B9CF7").ready();
});
stxx.addSeries("^NIOAFN", { display: "Symbol 2" }, function () {
	histRenderer.attachSeries("^NIOAFN", "#95B7F6").ready();
});
stxx.addSeries("^NIOAMD", { display: "Symbol 3" }, function () {
	histRenderer.attachSeries("^NIOAMD", "#B9D0F5").ready();
});

Add a series overlay for data that *already exists in the chart*.

// By setting loadData to false, the chart will assume the data exists, and not request it from the quotefeed.
stxx.addSeries("Close", { color: "purple", loadData: false });

Add multiple series and attach them all to the same renderer with a custom y-axis on the left.

// See this example working here: https://jsfiddle.net/chartiq/b6pkzrad.

// Note how the addSeries callback is used to ensure the data is present before the series is displayed.

stxx.addSeries(
	"NOK",
	{
		renderer: "Lines", // Create a line renderer
		type: "mountain", // of mountain type
		yAxis: {
			// and give it its own y axis
			position: "left", // on the left
			textStyle: "#0044FF", // with labels of color #0044FF
			decimalPlaces: 0, // no decimal places on the labels
			maxDecimalPlaces: 0, // and no defimal places on the last price floating label either.
		},
		name: "left_axis_renderer", // Call the custom renderer "left_axis_renderer", so it can be referenced by other series.
		color: "#FFBE00", // Set the line color to "#FFBE00"
		width: 4, // and a width of 4.
		display: "NOK Sample", // Finally, use a different display name of "NOK Sample" on the tooltip.
	},
	function () {
		stxx.addSeries(
			// Now that the first series and rederer has been set
			"SNE", // add the 2nd series using that same renderer.
			{
				name: "left_axis_renderer",
				color: "#FF1300",
				display: "Sony Sample",
			}
		);
	}
);

Add a series with a colored bar renderer using default colors.

stxx.addSeries("MSFT", { renderer: "Bars", colored: true });

Add a candle series for GE, and display it's Bid and Ask.

// Assuming Bid/Ask data is NOT part of the initial data objects and can be fetched individually using different instrument IDs.
stxx.addSeries("ge", { renderer: "Candles", shareYAxis: true });
stxx.addSeries("geBid", {
	display: "Ge Bid",
	symbol: "ge",
	field: "Bid",
	color: "yellow",
	renderer: "Lines",
	shareYAxis: true,
});
stxx.addSeries("geAsk", {
	display: "Ge Ask",
	symbol: "ge",
	field: "Ask",
	color: "blue",
	renderer: "Lines",
	shareYAxis: true,
});

Add a series with a candle renderer using custom colors.

stxx.addSeries("MSFT", {
	renderer: "Candles",
	fill_color_up: "magenta",
	border_color_up: "purple",
	fill_color_down: "lightgreen",
	border_color_down: "green",
});

Add a series with Histogram renderer using default colors.

stxx.addSeries("ge", { renderer: "Histogram", color: "red" });

Add a series with tension to cause the lines to be curved instead of straight.

// The "tension" parameter is a line renderer parameter.
// The 'renderer:"Lines"' parameter could theoretically be omitted since it is the default renderer.
stxx.addSeries("GE", { renderer: "Lines", type: "mountain", color: "yellow", tension: 0.3 });

Display an inverted chart for instrument "T" using equations as symbols

// Note the formatter used to change the sign of the axis values.
let axis2 = new CIQ.ChartEngine.YAxis({
	position: "left",
	textStyle: "#FFBE00",
	priceFormatter: function (stx, panel, price, decimalPlaces) {
		return stx.formatYAxisPrice(price, panel, decimalPlaces) * -1;
	},
});

stxx.addSeries(
	"=-1*T",
	{ display: "Test", width: 4, renderer: "Lines", color: "#FFBEDD", yAxis: axis2 },
	function () {}
);

// This will display the same series in the standard scale.
let axis3 = new CIQ.ChartEngine.YAxis({ position: "left", textStyle: "#FFBE00" });
stxx.addSeries(
	"T",
	{ display: "Test", width: 4, renderer: "Lines", color: "#FFBEDD", yAxis: axis3 },
	function () {}
);

Add a series that will use its own custom y-axis on the left.

// Note that the renderer does not need to be explicitly declared;
// nor does the y axis, since they will only belong to this one series.
// The addSeries call will take the pertinent parameters and internally
// create the required axis and render objects that will be associated with it.
stxx.addSeries(
	"T",
	{
		display: "Test",
		renderer: "Lines",
		type: "mountain",
		color: "#FFBEDD",
		yAxis: { position: "left", textStyle: "#FFBE00" },
	},
	function () {
		console.log("This is a callback. All done.");
	}
);

Use a renderer to display heat map data points.

// Each attached series will represent a stream of colors for the heat map.
// Note special data formatting, where the custom field that will be used for the stream of data points,
// is an array of values -- 'Bids' in this example.
let renderer = stxx.setSeriesRenderer(new CIQ.Renderer.Heatmap());
stxx.addSeries(
	"L2",
	{
		data: [
			{ DT: "2019-01-04", Bids: [100, 100.3, 100.2, 101] },
			{ DT: "2019-01-07", Bids: [101, 101.5, 102, 103] },
			{ DT: "2019-01-08", Bids: [101.2, 101.5, 101.7, 102] },
			{ DT: "2019-01-09", Bids: [101.3, 101.7, 101.9] },
			{ DT: "2019-01-10", Bids: [102] },
		],
	},
	function () {
		renderer.attachSeries("L2", { field: "Bids", color: "#FF9300" }).ready();
	}
);

Add a series with a custom baseline.

stxx.addSeries("GOOG", { baseline: { defaultLevel: 105 }, color: "purple" });

addYAxis(panel, yAxis)

Adds a yAxis to the specified panel. If the yAxis already exists then it is assigned its match from the panel.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel | string

The panel to add (i.e. stxx.chart.panel)

yAxis CIQ.ChartEngine.YAxis

The YAxis to add (create with new CIQ.ChartEngine.YAxis)

Since:
  • 5.1.0 Added return value.
  • 7.1.0 Accepts panel as a string.
Returns:

The YAxis added (or the existing YAxis if a match was found)

Type
CIQ.ChartEngine.YAxis

adjustDrawings()

Loops through the existing drawings and asks them to adjust themselves to the chart dimensions.


adjustHighlightedDataSetField(field)

Function which can be used to modify the highlighted field to be used for an averaging-type drawing. Can be customized (overridden) to adjust certain fields, while passing through others. Note: if the field to be returned is a member of an object (e.g., AAPL.Close), the proper format for returning this would be "AAPL-->Close".

Parameters:
Name Type Description
field string

dataSet field

Since:
  • 7.0.0

Returns:

adjusted field

Type
string
Example
stxx.adjustHighlightedDataSetField=function(field){
	if(!field) return null;
	for(var st in this.layout.studies){
		var study=this.layout.studies[st];
		if(study.outputMap.hasOwnProperty(field)) {
			// adjust the field based on the study in which it belongs
			if(study.type=="Pivot Points") return null;
			...
			break;
		}
	}
	for(var sr in this.chart.series){
		var series=this.chart.series[sr];
		if(series.id==field.split("-->")[0]) {
			// adjust the field based on the series in which it belongs
			if(series.id=="AAPL") return series.id+"-->High";
			...
			break;
		}
	}
	return field;
};

adjustIfNecessary(panel, tick, value)

Returns the unadjusted value for a given value, if an adjustment (split) had been applied. This can return a value relative to the original closing price.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel to check

tick number

The location in the dataset

value number

The value to adjust

Returns:

The adjusted value

Type
number

append(o, n)

Appends custom developer functionality to an internal chart member. See “Injection API".

Parameters:
Name Type Description
o string

Signature of member

n function

Callback function, will be called with "apply"

Since:
  • 04-2015 You can append either to an CIQ.ChartEngine instance, or to the prototype. The first will affect only a single chart while the latter will affect any chart (if you have multiple on the screen)
  • 15-07-01 Function returns a descriptor which can be passed in to removeInjection() to remove it later on.
Returns:

Injection descriptor which can be passed in to CIQ.ChartEngine#removeInjection to remove it later on.

Type
object

appendMasterData(appendQuotes [, chart] [, params])

As of version 5.1, his method has been deprecated in favor of CIQ.ChartEngine#updateChartData which provides improved functionality.

The following parameters are only applicable for legacy versions (pre 5.1):

Parameters:
Name Type Argument Description
appendQuotes array/object

An array of properly formatted OHLC quote object(s). See Data Format.
Or a last sale object with the following elements:

Properties
Name Type Argument Description
Last number

Last sale price

Volume number <optional>

Trade volume

Bid number <optional>

Bid price

Ask number <optional>

Offer/Ask price

DT number <optional>

Date of trade. It must be a java script date [new Date().getTime()]. If omitted, defaults to "right now" in the set dataZone (see CIQ.ChartEngine#setTimeZone); or if no dataZone is set, it will default to the browser's timezone (not recommended for international client-base since different users will see different times). It is important to note that this value must be in the same timezone as the rest of the masterData already sent into the charting engine to prevent tick gaps or overlaps.

chart CIQ.ChartEngine.Chart <optional>

The chart to append the quotes. Defaults to the default chart.

params object <optional>

Parameters to dictate behavior

Properties
Name Type Argument Description
noCreateDataSet boolean <optional>

If true then do not create the data set automatically, just add the data to the masterData

allowReplaceOHL boolean <optional>

Set to true to bypass internal logic that maintains OHL

bypassGovernor boolean <optional>

If true then masterdata will be immediately updated regardless of CIQ.ChartEngine#streamParameters

fillGaps boolean <optional>

If true then CIQ.ChartEngine#doCleanupGaps is called using the CIQ.ChartEngine#cleanupGaps setting. This will ensure gaps will be filled in the master data from the last tick in the chart to the date of the trade.
Reminder: tick does not fill any gaps as it is not a predictable interval.

secondarySeries boolean <optional>

Set to the name of the element ( valid comparison symbol, for example) to load data as a secondary series.

useAsLastSale boolean <optional>

If not using a 'last sale' formatted object in appendQuotes, you can simply set this parameter to true to force the data as a last sale price; or further define it by creating an object including other settings as needed. This option is available in cases when a feed may always return OHLC formatted objects or a 'Close' field instead of a 'Last' field, even for last sale streaming updates. By definition a 'last' sale can only be a single record indicating the very 'last' sale price. As such, even if multiple records are sent in the appendQuotes array when this flag is enabled, only the last record's data will be used. Specifically the 'Close' and 'Volume' fields will be streamed.

Properties
Name Type Argument Description
aggregatedVolume boolean <optional>

If your last sale updates send current volume for the bar instead of just the trade volume, set this parameter to 'true' in the params.useAsLastSale object. The sent in volume will be used as is instead of being added to the existing bar's volume.

Since:
  • 2015-11-1 Added params.bypassGovernor and params.allowReplaceOHL.
  • 2015-11-1 Deprecated params.force. Every call will update the tick to maintain the proper volume, and createDataSet is now controlled by sp.maxTicks, sp.timeout, or params.bypassGovernor.
  • 3.0.0 Now appendQuotes also takes last sale data to allow streaming capabilities. This can now be used instead of streamTrade.
  • 3.0.0 New params.fillGaps, params.secondarySeries, and params.useAsLastSale.
  • 4.0.0 Last sale streaming will now update a bar in the past to comply with the date sent in instead of just updating the current tick.
  • 4.0.3 Added params.useAsLastSale.aggregatedVolume.
  • 5.0.1 Now calls doCleanupDates in case is is being called directly when not using a quoteFeed, to update an entire candle.
Deprecated:

attachQuoteFeed( [quoteFeed] [, behavior] [, filter])

Attaches a quote feed to the charting engine by creating an internal quote feed driver, which the chart uses to pull data from the quote feed as needed.

Multiple quote feeds may be attached to the engine by including the filter parameter, which enables the quote feed driver to determine whether the quote feed should be used for a specified instrument. If a filter is not provided, the quote feed becomes the default quote feed and is used if all other attached quote feeds (which must have filters) do not match the filter criteria.

Only one unfiltered quote feed can be attached to the chart engine. If you call this function without a filter argument when a default, unfiltered quote feed is already attached, all attached quote feeds, including the default quote feed, are removed, and the object passed to quoteFeed is attached as the new default.

Note: You must attach filtered quote feeds in order of priority. The quote feeds are filtered in the order in which they are attached to the engine. The first quote feed that matches the filter criteria is used. If none of the filtered quote feeds match the criteria, the unfiltered default quote feed is used. The default quote feed can be attached without regard to priority.

Parameters:
Name Type Argument Description
quoteFeed object <optional>

Your quote feed object.

behavior object <optional>

Contains initialization parameters for the quote feed.

Properties
Name Type Argument Default Description
suppressErrors number <optional>

If true, then no error is displayed when the quote feed returns one. Instead, the new symbol is simply not loaded and the prior symbol remains on the screen.

refreshInterval number <optional>

If not null, then sets the frequency for fetching updates (if null or zero then fetchUpdateData is not called).

forwardPaginationRetryInterval number <optional>

Defaults to five seconds when set to null. In historical mode, determines how often (in seconds) a forward pagination attempt can be tried. Forward pagination is different than a fetch update, in that it tries to get enough data just to fill the gap in the visible portion of the chart rather than to request an update from the visible area to the current candle, which depending on the visible range, could be days or months away.

bufferSize number <optional>

The minimum number of undisplayed historical ticks that will always be buffered in masterData. Useful to prevent temporary gaps on studies while paginating. This forces pagination fetch requests to be triggered ahead of reaching the edge of the chart, if the number of already loaded bars is less than the required buffer size. This parameter can be reset at any time by manipulating stxx.quoteDriver.behavior.bufferSize; it will then become active on the very next loading check. It is used on both left and right side pagination requests.

callback function <optional>

Optional callback after any fetch to enhance functionality. It will be called with the params object used with the fetch call.

noLoadMore number <optional>

If true, then the chart does not attempt to load any more data after the initial load.

findHeadOfData number <optional>

If true, then the chart attempts to load more data (and find the most recent) if the initial load returned no data.

loadMoreReplace boolean <optional>

If true, then when paginating, the driver replaces masterData instead of prepending. Set this if your feed can only provide a full data set of varying historical lengths.

adjustmentMethod string <optional>

Overrides the quote feed's default dividend/split adjustment method. The value will depend on the particular quote feed implementation.

maximumTicks number <optional>
20000

Limits the maximum number of ticks to request from a quote feed. Setting a value in the quote driver's behavior overrides an individual quote feed's maxTicks value.

ignoreUpdateError boolean <optional>

Indicates that an update that fails should be treated as no data found rather than an error.

filter function <optional>

Filters the quote feed provided by the quoteFeed parameter. The filter function takes an object parameter typically containing symbolObject, symbol, and interval properties. The properties associate the quote feed with an instrument. If the filter function returns true, the quote feed is used for the instrument.

Since:
  • 2016-12-01
  • 5.0.0 Added behavior.bufferSize.
  • 5.1.1 Added behavior.maximumTicks.
  • 6.0.0 Added behavior.forwardPaginationRetryInterval.
  • 6.2.3 Added behavior.ignoreUpdateError.
  • 7.2.0 Added behavior.findHeadOfData parameter.
  • 7.3.0 Added filter parameter.
See:
Example

Attach a quote feed and have the driver call fetchUpdateData once per second.

stxx.attachQuoteFeed(yourQuotefeed, { refreshInterval: 1, bufferSize: 200 }, function (params) {
	return (
		CIQ.Market.Symbology.factory(params.symbolObject) == CIQ.Market.FOREX &&
		params.symbol == "^USDCAD" &&
		params.interval == "day"
	);
});

backOutX(x)

Returns the relative canvas position given an absolute X position on the screen

Parameters:
Name Type Description
x number

X pixel on the screen

Returns:

Relative X position on canvas

Type
number

backOutY(y)

Returns the relative canvas position given an absolute Y position on the screen

Parameters:
Name Type Description
y number

Y pixel on the screen

Returns:

Relative Y position on canvas

Type
number

barFromPixel(x [, chart])

Returns the position (array index) of the first dataSegment element encountered given the X pixel. Do not reference this into dataSegment without checking bounds, because the return value may be negative or greater than the dataSegment array length.

See CIQ.ChartEngine#tickFromPixel if you wish to locate the dataSet position.

Parameters:
Name Type Argument Description
x number

An X pixel location on the chart

chart CIQ.ChartEngine.Chart <optional>

Which chart to use. Defaults to this.chart.

Returns:

The bar that lies on the X pixel (may be negative/before or after the chart)

Type
number

calculateYAxisMargins(yAxis)

Calculates and sets the value of zoom and scroll for a y-axis based on yAxis.initialMarginTop and yAxis.initialMarginBottom. This method automatically translates those values into starting scroll and zoom factors.

If the combined initial values are greater than the y-axis height, then both zoom and scroll are reset to 0.

When modifying a y-axis margin after the axis has been rendered, call this function followed by CIQ.ChartEngine#draw to activate the change.

Parameters:
Name Type Description
yAxis CIQ.ChartEngine.YAxis

The y-axis to reset.

Since:

calculateYAxisPositions()

Calculates the width and left/right position of all y-axes.

When modifying a y-axis width or left/right position setting after the axis has been rendered, call this function followed by CIQ.ChartEngine#draw to activate the change.

Since:
  • 8.3.0 Adjusts the candleWidth, not the maxTicks, when the chart width changes.


calculateYAxisRange(panel, yAxis [, low] [, high])

Calculates the range for the y-axis and sets appropriate member variables.

The default behavior is to stop vertical scrolling when only 1/5 of the chart remains on screen, so the primary chart never completely scrolls off the screen — unless you start zooming the y-axis by grabbing it and pulling it down. Once the zoom level goes into the negative range (meaning that you are shrinking the chart vertically) the vertical panning limitation goes away.

This method should seldom if ever be called directly. But you can override this behavior (so that a chart is always allowed to completely scroll off the screen at any zoom level) with the following code:

stxx.originalcalculateYAxisRange = stxx.calculateYAxisRange;
CIQ.ChartEngine.prototype.calculateYAxisRange = function(panel, yAxis, low, high) {
    var beforeScroll = this.chart.yAxis.scroll;
    this.originalcalculateYAxisRange(panel, yAxis, low, high);
    this.chart.yAxis.scroll = beforeScroll;
};
Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel containing the y-axis.

yAxis CIQ.ChartEngine.YAxis

The y-axis for which the range is calculated.

low number <optional>

The low value for the axis.

high number <optional>

The high value for the axis.

Since:
  • 5.2.0 When the y-axis is zoomed in, there is no limitation on vertical panning.


canvasColor(className [, ctx])

Sets color and globalAlpha (opacity) for the canvas, given a css class name.

Call this before drawing on the canvas.

Also see CIQ.ChartEngine#setStyle.

Parameters:
Name Type Argument Description
className string

A CSS style. Supports "color" and "opacity"

ctx external:CanvasRenderingContext2D <optional>

An HTML Context

Since:
  • 4.0.0 Allow color:"transparent" to pass through and not use defaultColor. Instead, use defaultColor if there is no style.color.

Example
stxx.canvasColor("myStyle");

canvasFont(className, ctx)

Sets font for the canvas, given a css class name.

Call this before drawing on the canvas.

The canvas font will be set using the CSS font-style + font-weight + font-size + font-family.

Note that the canvas font will use the font-family CSS property, NOT the combined font CSS property. Be aware of this when using CIQ.ChartEngine#setStyle

Also note that numeric font-weights are not honored in the canvas in Chrome.

Parameters:
Name Type Description
className string

The name of the CSS class to pull font from

ctx external:CanvasRenderingContext2D

An HTML Context


canvasStyle(className)

Returns an object containing the class style given a css class name (used by plotLine() for instance).

A caching mechanism is used for performance. If styles are changed dynamically then use CIQ.ChartEngine#clearStyles to reset.

Also see CIQ.ChartEngine#setStyle.

Parameters:
Name Type Description
className string

The CSS class name to get the styles

Returns:

An object containing each style, in camel case.

Type
object

changeOccurred(change)

Legacy method used to internally dispatch a registered event whenever a change to layout, drawings or theme occurs. Events must be registered using CIQ.ChartEngine#addDomEventListener for "layout", "drawing", "theme" and "preferences".

This is simply a proxy method that calls the corresponding CIQ.ChartEngine#dispatch method.

Developers creating their own custom functionality should call CIQ.ChartEngine#dispatch instead.

Parameters:
Name Type Description
change string

Type of change that occurred.


changeVectorParameter(parameter, value)

Sets the current drawing parameter as described by CIQ.ChartEngine.currentVectorParameters (color, pattern, etc)

Parameters:
Name Type Description
parameter string

The name of the drawing parameter to change (currentColor, fillColor, lineWidth, pattern, axisLabel, fontSize, fontStyle, fontWeight, fontFamily)

value string

The value of the parameter

Since:
  • 3.0.0

Returns:

True if property was assigned

Type
boolean
Example
this.stx.changeVectorParameter("currentColor", "yellow"); // or rgb/hex
this.stx.changeVectorParameter("axisLabel", false); // or "false"
this.stx.changeVectorParameter("lineWidth", 5); // or "5"
this.stx.changeVectorParameter("fontSize", "12"); // or 12 or "12px"
this.stx.changeVectorParameter("pattern", "dotted");

changeVectorType(value)

Sets the current drawing tool as described by CIQ.ChartEngine.currentVectorParameters (segment, line, etc.). Also triggers crosshairs to appear if they are relevant to the drawing.

Note: The value "" (empty string) is used for the "no tool" option, and null is used to turn off drawing mode entirely. If the "no tool" option is set, crosshairs will not appear even if crosshairs are toggled on.

Parameters:
Name Type Description
value string

The name of the drawing tool to enable.

Example
// Activates a drawing type described by currentVectorParameters.
stxx.changeVectorType("rectangle");

// Deactivates drawing mode.
stxx.changeVectorType("");

// Clears the drawings.
stxx.clearDrawings();

checkForEmptyPanel(panel [, dryRun] [, exclude])

Determines if a panel is empty of series and studies. If the panel is empty, remove the panel.

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel | string

The panel to check.

dryRun boolean <optional>

True to just return if it was an empty panel without actually deleting it.

exclude string | Array.<string> <optional>

Disregard anything in this array when checking for plots in this panel.

Since:
  • 6.3.0
  • 7.1.0 Added the dryRun and exclude parameters.
Returns:

False if the panel should still be displayed, true if panel is removed.

Type
boolean

clear()

Removes any studies from the chart, and hides the chart controls. The chart becomes uninitialized, disabling any interaction with it. The canvas is not cleared; CIQ.clearCanvas can do that.

Useful when a chart is loaded with no data due to a quoteFeed error. Automatically called by CIQ.ChartEngine#loadChart

Since:
  • 2016-12-01


clearCurrentMarketData(chart, symbol)

INJECTABLE

Clears the chart.currentMarketData object or the one linked to a secondary series, if one provided.

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

The chart to clear. If omitted, will clear all charts.

symbol string

Symbol to clear this symbol's secondary series information

Since:
  • 6.1.0


clearDrawings(cantUndo, deletePermanent)

Clears all the drawings on the chart. (Do not call abortDrawings directly).

Parameters:
Name Type Description
cantUndo boolean

Set to true to make this an "non-undoable" operation

deletePermanent boolean

Set to false to not delete permanent drawings

Since:
  • 6.0.0 Added deletePermanent parameter.


clearMeasure()

Clears the innerHTML value of the .mMeasure HTML DOM Node.


clearStyles()

Call this to remove all of the loaded canvas styles, for instance after loading a new css file.

Also see CIQ.ChartEngine#setStyle and CIQ.ChartEngine#canvasStyle.


cloneStyle(styleObject)

Clones a style from a style object (obtained from getComputedStyle). Any styles are converted to camel case. This method automatically converts from browsers that store styles as numeric arrays rather than as property objects.

Parameters:
Name Type Description
styleObject object

A style object derived from getComputedStyle

Returns:

A new style object that will match properties

Type
object

colorOrStyle(str)

Detects if a string is a valid CSS color and if so returns that string.

Otherwise it returns a style object, assuming that the string is a classname.

Parameters:
Name Type Description
str string

Either a color or a className

Returns:

Either the color or a class object

Type
object

completeAsyncAction()

Studies or plugins that use asynchronous data should call this when their async activities are complete. See CIQ.ChartEngine#startAsyncAction


connectTheDots(points, color, type [, context] [, confineToPanel] [, parameters])

Draws a series of connected lines on the canvas. The points are in a straight array for compactness. This is used for instance in the freeform (doodle) drawing tool

Parameters:
Name Type Argument Description
points array

A series of points in the pattern x0,y0,x1,y1

color string

Either a color or a Styles object as returned from CIQ.ChartEngine#canvasStyle

type string

The type of line to draw ("segment","ray" or "line")

context external:CanvasRenderingContext2D <optional>

The canvas context. Defaults to the standard context.

confineToPanel object <optional>

Panel the line should be drawn in, and not cross through. Or set to 'true' to confine to the main chart panel.

parameters object <optional>

Additional parameters to describe the line

Properties
Name Type Argument Description
pattern string <optional>

The pattern for the line ("solid","dashed","dotted")

width number <optional>

The width in pixels for the line

opacity number <optional>

Opacity for the line


constrainCandleWidth(candleWidth)

Ensures that a candle width value is within the limits of CIQ.ChartEngine#minimumCandleWidth and CIQ.ChartEngine#maximumCandleWidth.

Parameters:
Name Type Description
candleWidth number

The candle width to be checked.

Since:
  • 7.4.0

Returns:

The value of candleWidth if candleWidth is between minimumCandleWidth and maximumCandleWith. Otherwise, minimumCandleWidth if candleWidth is less than minimumCandleWidth. Otherwise, maximumCandleWith if candleWidth is greater than maximumCandleWith.

Type
number

convertToDataZone(browserDate)

Given a browser time it will return the date in dataZone time. See CIQ.ChartEngine#setTimeZone for more details. If no dataZone is set, it will return the original date passed in.

Parameters:
Name Type Description
browserDate date

Date in browser time - as in 'new Date();'

Since:
  • 07-2016-16.6

Returns:

Date converted to dataZone

Type
date

createBlock(left, width, top, height, className [, context])

Draws a filled rectangle on the chart.

Parameters:
Name Type Argument Description
left number

The x-axis coordinate of the starting point of the rectangle.

width number

The width of the rectangle.

top number

The y-axis coordinate of the starting point of the rectangle.

height number

The height of the rectangle.

className string

A CSS class name used to set the fill color of the rectangle.

context external:CanvasRenderingContext2D <optional>

The canvas context on which the rectangle is drawn. If this parameter is not provided, the chart context is used.

Deprecated:

createDataSet( [dontRoll] [, whichChart] [, params])

INJECTABLE

Rolls masterData into a dataSet. A dataSet is rolled according to periodicity. For instance, daily data can be rolled into weekly or monthly data. A 1 minute data array could be rolled into a 7 minute dataSet. This method also calls the calculation functions for all of the enabled studies. The paradigm is that calculations are performed infrequently (when createDataSet is called for instance loadChart or setPeriodicity). Then the data is available for quick rendering in the draw() animation loop.

Data outside the currently set market hours/sessions will be automatically filtered, when the CIQ.ExtendedHours addOn is installed.
Otherwise, it will be displayed individually when no roll up is needed, or rolled up into the prior bar when asking the chart to perform a roll up.

For daily intervals, if a range is set, the aggregation will start rolling on the starting date of the range.
For example:

  • If the chart is displaying data with a beginning range set to the 1st of the month with a 5 day roll-up.
  • The first bar will include data for the 1st to the 5th of the month.
  • If the range is then changed to begin on the 2nd of the month, with the same 5 day roll-up.
  • The first bar will shift so it includes data for the 2nd to the 6th of the month.
  • As more data is brought in by zoom/pan operations, the chart will ensure that the '2nd – 6th' of the month point in time is still valid as the anchoring point of the roll up, backwards and forward. If a range is not set, the fist bar on the masterData will be used as the beginning roll up.

Weekly rollups start on Sunday unless a market definition exists to indicate Sunday is not a market day, in which case the next market day will be used. Instructions to set a market for the chart can be found here: CIQ.Market

Aggregation is done by systematically picking the first element in each periodicity range and tracking 'High', 'Low', 'Volume', and 'Close' so the aggregated quote has the properly consolidated values:

  • Consolidated High = the highest value for the range
  • Consolidated Low = the lowest value for the range
  • Consolidated Volume = the total combined volume for the range
  • Consolidated Close = the final close value for the range

All other series values will remain as initially set on the first element and will not be aggregated since the library does know their meaning other than being data-points in a series. If you need to also aggregate these series values in a specific manner you can do so by using the following manipulation functions:

Important: if your data has gaps and you are rolling up the master data, you may see unexpected results if your data does not have a tick matching the exact start time for the periodicity selected. This is due to the fact that aggregation process only uses the ticks is has in the master data and no new ticks are added. Example, if you are rolling up seconds into minutes ( stxx.setPeriodicity({period:60, interval:1, timeUnit:"second"}); ) and your master data has objects with the following time stamps: 10:20:00, 10:20:11, 10:20:24, 10:20:50, 10:20:51, 10:21:30, 10:21:45, 10:21:46, 10:21:59, your aggregated results will be an object for 10:20:00, and one for 10:21:30; where you where probably expecting one for 10:20:00, and one for 10:21:00. But since there is no 10:21:00 object in the master data, the very next one will be used as the starting point for the next aggregation...and so on. To eliminate this problem and guarantee that every bar starts on an exact time for the selected aggregation period, you must first fill in the gaps by setting the CIQ.ChartEngine#cleanupGaps to true.

Parameters:
Name Type Argument Description
dontRoll boolean <optional>

If true then don't roll into weeks or months. Do this when masterData contains raw data with weekly or monthly interval. Optionally you can set stxx.dontRoll to always force dontRoll to be true without having to send as a parameter.

whichChart CIQ.ChartEngine.Chart <optional>

Deprecated, no longer in use.

params object <optional>

Additional parameters.

Properties
Name Type Description
appending boolean

Set to true if called after appending to end of masterdata (CIQ.ChartEngine#updateChartData). It will execute a partial regeneration to increase performance.

appendToDate Date

Append from this point in the dataSet. Any existing data will be scrapped in favor of the data we are appending. If not set, then appended data will be added to the end of the existing dataSet.

Since:
  • 3.0.0 Data set will be automatically filtered, when the CIQ.ExtendedHours add-on is installed to exclude any data outside the active market sessions. See CIQ.Market for details on how to set market hours for the different exchanges.
  • 5.1.0 Consolidation for daily intervals now aligns with set range to improve rolling predictability on daily intervals.
  • 5.1.1 Added the params.appendToDate parameter.
  • 5.1.1 When chart.dynamicYAxis is true, calculates the length (in pixels) of text for a quote.
  • 8.0.0 Deprecates the whichChart parameter. This function no longer iterates through the charts array.

createDrawing(type, parameters)

Creates a new drawing of the specified type with the specified parameters. See Using and Customizing Drawing Tools for more details.

Parameters:
Name Type Description
type string

Drawing name

parameters object

Parameters that describe the drawing

Returns:

A drawing object

Type
CIQ.Drawing

createSpacedDateXAxis( [chart])

Creates date based x-axis.

This method is algorithmically designed to create an x-axis that is responsive to various degrees of user panning, zooming, and periodicity selection. It will print different versions of dates or times depending on those factors, attempting to prevent overlaps and evenly spacing labels. If a locale is set, then internationalized dates will be used.

The algorithm is also market hours aware. See CIQ.Market for details on how to set market hours for the different exchanges.

This method sets the CIQ.ChartEngine.chart.xaxis array, which is a representation of the complete x-axis including future dates. Each array entry contains an object:
DT – The date/time displayed on the x-axis
date – yyyymmddhhmm string representation of the date
data – If the x-axis coordinate is in the past, then references the chart data element for that date

Parameters:
Name Type Argument Description
chart object <optional>

The chart to print the x-axis

Since:
  • 8.4.0

Returns:

axisRepresentation that can be passed in to CIQ.ChartEngine#drawXAxis

Type
Array.<CIQ.ChartEngine.XAxisLabel>

createTickXAxisWithDates( [chart])

Draws date based x-axis.

This method is algorithmically designed to create an x-axis that is responsive to various degrees of user panning, zooming, and periodicity selection. It will print different versions of dates or times depending on those factors, attempting to prevent overlaps and evenly spacing labels. If a locale is set, then internationalized dates will be used.

The algorithm is also market hours aware. See CIQ.Market for details on how to set market hours for the different exchanges.

CIQ.ChartEngine.XAxis#timeUnit and CIQ.ChartEngine.XAxis#timeUnitMultiplier can be hard set to override the algorithm (See Custom X-Axis for additional details).

This method sets the CIQ.ChartEngine.chart.xaxis array which is a representation of the complete x-axis including future dates. Each array entry contains an object:
DT – The date/time displayed on the x-axis
date – yyyymmddhhmm string representation of the date
data – If the xaxis coordinate is in the past, then a reference to the chart data element for that date

Parameters:
Name Type Argument Description
chart object <optional>

The chart to print the xaxis

Since:
Returns:

axisRepresentation that can be passed in to CIQ.ChartEngine#drawXAxis

Type
Array.<CIQ.ChartEngine.XAxisLabel>

createXAxisLabel(params)

Creates a label on the x-axis. Generally used to create x-axis labels for drawings.

Uses the font properties of the CSS style stx-float-date (see css/stx-chart.css).

Note: This function is not used for the floating crosshairs date label, which is also styled using stx-float-date. See CIQ.ChartEngine.AdvancedInjectable#updateChartAccessories and CIQ.ChartEngine.AdvancedInjectable#headsUpHR for more details.

Parameters:
Name Type Description
params object

Function parameters.

Properties
Name Type Argument Default Description
panel CIQ.ChartEngine.Panel

The panel on which the label is created.

txt string

The text for the label.

x number

The horizontal pixel position on the canvas for the label. Note: The function ensures that the label remains on the requested panel if this value is out of bounds.

To get the pixel position for a bar/date use CIQ.ChartEngine#pixelFromTick, CIQ.ChartEngine#pixelFromDate, or CIQ.ChartEngine#pixelFromBar.

backgroundColor string

The background color for the label.

color string <optional>

The foreground color for the label. If none is provided, then white is used, unless the background is white, in which case black is used.

pointed boolean <optional>

If true, add an upward pointing triangle to the top edge of the label horizontally centered to form a shape similar to --^--.

padding boolean <optional>
2

The amount of padding in pixels to add to the label text (top, right, bottom, and left).

Since:
  • 8.1.0 Function signature now includes the params object instead of a list of individual parameters. Added the padding parameter for easy customization.


createYAxisLabel(panel, txt, y, backgroundColor, color [, ctx] [, yAxis])

Creates a floating label on the y-axis unless CIQ.ChartEngine.YAxis#drawPriceLabels is false. This can be used for any panel and called multiple times to add multiple labels

Style: stx_yaxis ( font only )

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel on which to print the label

txt string

The text for the label

y number

The vertical pixel position on the canvas for the label. This method will ensure that it remains on the requested panel. To get the pixel for a value use CIQ.ChartEngine#pixelFromTransformedValue, or similar

backgroundColor string

The background color for the label.

color string

The text color for the label. If none provided then white is used, unless the background is white in which case black is used.

ctx external:CanvasRenderingContext2D <optional>

The canvas context to use, defaults to the chart

yAxis CIQ.ChartEngine.YAxis <optional>

Specifies which yAxis, if there are multiple for the panel

Since:
Example
stxx.createYAxisLabel(
	panel,
	"379600",
	stxx.pixelFromTransformedValue(price, panel),
	"green",
	"white"
);

currentQuote( [field])

Returns the current quote (the final element in the dataSet).

Parameters:
Name Type Argument Description
field string <optional>

Optional field. If provided, searches for the first record with that field having a value.

Since:
  • 7.3.0 Added the field argument.

Returns:

The most recent quote.

Type
object

dateFromTick(tick [, chart] [, nativeDate] [, tickSource])

Returns a date (in yyyymmddhhmm form) given a tick (location in the dataSet). If the tick lies outside of the dataSet then the date will be arrived at algorithmically by calculating into the past or future.

Parameters:
Name Type Argument Description
tick number

Location in the dataSet

chart CIQ.ChartEngine.Chart <optional>

A chart object

nativeDate boolean <optional>

True to return as date object otherwise returns in yyyymmddhhmm form

tickSource string <optional>

Tick array to search. Defaults to dataSet

Returns:

The date form dictated by native param

Type
string | Date

decimalPlacesFromPriceTick(priceTick [, idealTickSizePixels])

Returns the appropriate number of decimal points to show for a given priceTick (price differential between two ticks)

Parameters:
Name Type Argument Description
priceTick number

The price differential between two ticks

idealTickSizePixels number <optional>

The number of pixels between two ticks

Since:
  • 5.2.0
  • 8.4.0 Added idealTickSizePixels parameter. If supplied, priceTick will be divided by it before determining decimal places.
Returns:

The number of decimal places appropriate to show

Type
number

defaultMarkerPlacement(params)

Placement functions are responsible for positioning markers in their holder according to each marker's settings. They are called directly form the draw() function in the animation loop. Each Marker placement handler must have a corresponding placementFunction or this method will be used.

firstTick and lastTick can be used as a hint as to whether to display a marker or not.

See CIQ.Marker and Markers for more details

Parameters:
Name Type Description
params object

The parameters

Properties
Name Type Description
arr array

The array of markers

panel object

The panel to display

firstTick number

The first tick displayed on the screen

lastTick number

The last tick displayed on the screen

Since:
  • 2015-09-01 On prior versions you must define your own default function. Example: CIQ.ChartEngine.prototype.defaultMarkerPlacement = yourPlacementFunction;.


deleteAllPanels()

Deletes all of the panels (except for the default chart panel)


deleteSeries(field, chart [, params])

INJECTABLE

Removes series data from masterData and unregisters the series from chart.series without removing it from any associated renderers. Also updates the quoteFeed subscriptions. Not recommended to be called directly. Instead use CIQ.ChartEngine#removeSeries to remove a series from all associated renderers, or CIQ.Renderer#removeSeries to remove a series from a specific renderer.

Parameters:
Name Type Argument Description
field string | object

The name of the series to remove -OR- the series object itself.

chart CIQ.ChartEngine.Chart

The chart to remove from

params object <optional>

Parameters

Properties
Name Type Argument Default Description
action string <optional>
"remove-series"

Action to be dispatched with symbolChange event

Since:
  • 4.0.0 Now supports passing a series descriptor instead of a field.
  • 4.0.0 Series data is now totally removed from masterData if no longer used by any other renderers.
  • 4.0.0 Empty renderers are now removed when series are removed.
  • 6.3.0 deleteSeries now calls CIQ.ChartEngine#checkForEmptyPanel.

deleteYAxisIfUnused(panel, yAxis)

Removes the yAxis from the panel if it is not being used by any current renderers. This could be the case if a renderer has been removed. It could also be the case if a renderer is not attached to any series.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel | string

The panel

yAxis CIQ.ChartEngine.YAxis

The axis to be removed

Since:
  • 07/01/2015
  • 7.1.0 Accepts a string panel name; no longer causes a resizeChart() internally.

destroy()

Clears out a chart engine instantiated with new CIQ.ChartEngine(), eliminating all references including the resizeTimer, quoteDriver, styles and eventListeners.

It's still up to the developer to set the declared pointer for the instance to null so that the garbage collector can remove it.

Please note that this method will not remove the chart container or any elements within it, even if they were created by the engine. To do that, execute stx.container.remove(); to remove the chartContainer DOM elements, and then call this method to remove the chart engine itself. See example.

This method should only be used when you no longer need the chart engine and never be used in between CIQ.ChartEngine#loadChart calls to load or change symbols.

Example
// create
var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });

// execute this line to remove the chart container <div> and its sub elements
stxx.container.remove();

//destroy engine
stxx.destroy();

//remove
stxx = null;

detachQuoteFeed( [quoteFeed])

Detaches a quote feed. On removal of the last quote feed, calls quoteDriver.die().

Parameters:
Name Type Argument Description
quoteFeed object <optional>

Optional quote feed object to detach. Omit to detach all quote feeds.

Since:
  • 7.3.0


determineMinMax(quotes, fields [, sum] [, bypassTransform] [, length] [, checkArray] [, panel] [, axis] [, filters])

Determines the high and low values for the data set.

Requires an array of fields to check. For instance, the array might contain ["Close","Series1","Series2"] which would return the max and min of all of those values for each quote.

If you wish to exclude certain fields from your calculations to prevent excessive flattening of the charts, you can overwrite this method as follows:

stxx.origDetermineMinMax = stxx.determineMinMax;
stxx.determineMinMax = function(quotes, fields, sum, bypassTransform, length, checkArray) {
	// Add code here to remove anything you want from the 'fields' array.
	console.log('current fields', fields);
	return stxx.origDetermineMinMax(quotes, fields, sum, bypassTransform, length, checkArray);
}

Also see CIQ.ChartEngine.Chart#includeOverlaysInMinMax

Parameters:
Name Type Argument Description
quotes array

The array of quotes (typically CIQ.ChartEngine.chart.dataSegment) to evaluate for minimum and maximum values.

fields array

A list of fields to compare.

sum boolean | Array.<string> <optional>

If true, then compute maximum sum rather than the maximum single value across all fields. If an array, compute sum over just the fields in the array.

bypassTransform boolean <optional>

If true, then bypass any transformations.

length number <optional>

Specifies how much of the quotes array to process.

checkArray boolean <optional>

If true, the type of the value used to determine the min/max is checked to ascertain whether it is an array; if so, the first element of the array is retrieved for use in the min/max determination.

panel CIQ.ChartEngine.Panel <optional>

A reference to the panel rendering the quotes.

axis CIQ.ChartEngine.YAxis <optional>

A reference to the y-axis rendered for the quotes.

filters array <optional>

Array of functions to process the min/max values before returning. Filter functions must return a valid min/max tuple or false.

Since:
  • 2014-02
  • 7.3.0 Added checkArray parameter.
  • 8.0.0 Allow the sum parameter to be an array of valid fields to sum over. Added the panel, axis, and filters parameters.
Returns:

A tuple, min and max values.

Type
array

dispatch(type, data)

Dispatches an event by calling one or more event listeners registered for the event specified by type. Event listeners registered for the * event type are also subsequently called. See CIQ.ChartEngine#addEventListener.

Note: If any of the called event listeners returns true, all remaining uncalled listeners are bypassed.

Parameters:
Name Type Description
type string

Identifies the type of event for which the event listeners are called. Must be one of the types listed in CIQ.ChartEngine#addEventListener excluding *.

data object

A collection of parameters to provide to the listener functions called in response to the event. See the listener types listed in CIQ.ChartEngine#addEventListener for relevant parameters.

Returns:

False unless a called listener returns true, in which case this function also returns true.

Type
boolean
Example
// Trigger a layout change event; perhaps to save the layout.
stx.dispatch("layout", {
	stx: stx,
	symbol: stx.chart.symbol,
	symbolObject: stx.chart.symbolObject,
	layout: stx.layout,
	drawings: stx.drawingObjects,
});

displayAll( [params] [, cb])

Sets a chart to display all data for a security.

If no feed is attached, it will simply display all the data loaded in the present periodicity.
If the chart is driven by a QuoteFeed and no periodicity is requested, it will default to 'monthly'. It will then call QuoteDriver.loadAll() which makes multiple queries to ensure all data available from the quote feed is loaded. Once all the data is loaded, the chart will be set to cover that range using CIQ.ChartEngine#setRange

Parameters:
Name Type Argument Description
params object <optional>

Optional parameters in same format as CIQ.ChartEngine#setSpan.

cb function <optional>

Callback, is called when chart is displayed.

Since:
  • 04-2015


displayDragOK( [soft])

Displays the "ok to drag" div and the study/series which is highlighted, near the crosshairs.

Parameters:
Name Type Argument Description
soft boolean <optional>

True to just set the position of an already displayed div, otherwise, toggles display style based on whether long press was completed.

Since:
  • 7.1.0


displayDrawOK()

Displays the "ok to draw" icon and the field which is highlighted, near the crosshairs.

In general, any series and most studies can have a drawing placed on it. When such a plot is highlighted, this function will show the drawOk chart control and display the field being highlighted.

Since:
  • 7.0.0
  • 8.4.0 Works with any drawing.

displayErrorAsWatermark(panelKey, error)

Displays errors on the center bottom of the canvas.

In the event that there are multiple errors (caused by calling the method multiple times), they will get vertically stacked.

Note: Because displayErrorAsWatermark leverages CIQ.ChartEngine#watermark to draw errors on the canvas, the errors will not persist unless added from within the animation loop. See CIQ.ChartEngine#watermark for more info.

Parameters:
Name Type Description
panelKey string

The name of the panel

error string

The error text to draw on the canvas

Since:
  • 7.3.0


displayNotification(name, message [, params])

Adds a message to the chart.

Creates a div containing a text message. Appends the div to the CIQ.ChartEngine.htmlControls.notificationTray.

Notifications can be interactive (see the callback and dismissalListeners parameters), and they can be queried by their names, which are set as class names on the notification div.

Parameters:
Name Type Argument Description
name string

The name of the notification, which is added to the class list of the notification div.

message string

Text to display in the notification div.

params object <optional>

Configuration parameters.

Properties
Name Type Argument Description
callback function <optional>

Added to the notification div as a listener for the "pointer up" event.

dismissalListeners array <optional>

Array of event listeners added to the notification.

Properties
Name Type Description
type string

The listener event type. See CIQ.ChartEngine#addEventListener.

callback function

The listener callback function.

Since:
  • 8.0.0


displaySticky(params)

Displays the "sticky" (tooltip element). The sticky should be in CIQ.ChartEngine.controls.mSticky.

To disable stickies, set that element to null. See CIQ.ChartEngine.htmlControls.

To customize, see the Using and Customizing Drawing Tools tutorial.

Parameters:
Name Type Description
params object

Optional arguments to pass into the function.

Properties
Name Type Argument Description
message string <optional>

The message to display in the sticky.

backgroundColor string <optional>

The background color for the sticky (the foreground color is selected automatically).

forceShow boolean <optional>

If true, always shows the sticky (as opposed to only on hover).

noDelete boolean <optional>

If true, hides the delete instructions/button.

noEdit boolean <optional>

If true, hides the edit instructions/button.

type string <optional>

Set to "study","drawing","series", or whatever causes the sticky to be displayed.

positioner function <optional>

Sets custom positioning behavior for the sticky. Called with Function.prototype.call(), specifying the engine instance as context. Called with one argument, which is a reference to the sticky element.

Since:
  • 6.0.0 Consolidated arguments into the params object.
  • 6.3.0 Added the noEdit parameter.
  • 7.4.0 Added the positioner parameter.

doCleanupDates(quotes, interval)

This method is used to prepare date fields for internal use. It will:

  • convert dates to a JS Date in the timeZone set by setTimeZone(dataZone).

  • subsequently strip off the time portion on daily, weekly and monthly intervals.

  • If the date ('DT' or 'Date') does not include a time offset, such as 'yyyy-mm-dd', no time zone conversion will be performed. Use this option if you prefer to display the same date on all timezones. This applies to daily, weekly and monthly periodicities only.

Parameters:
Name Type Description
quotes array

The quote array to be converted

interval string

Interval of the quotes ("day", "week", etc).

Since:
  • 4.0.0
  • 5.2.0 Used on intraday and daily quotes to also convert dates to the indicated dataZone as set by setTimeZone(dataZone).

doCleanupGaps(quotes [, chart] [, params])

If CIQ.ChartEngine#cleanupGaps is set, this method will insert bars in an array of quotes for those periods missing a record according to the market hours and the current periodicity. See "CIQ.Market" for details on how to properly configure the library to your market hours requirements.

This method will not be called for tick since by nature it is no a predictable interval.

This method is automatically called if you are using a quoteFeed and have CIQ.ChartEngine#cleanupGaps set, but can be manually called if pushing or streaming data into the chart.

This method will affect intraday and underlying daily periods only. If the feed is already returning weekly and monthly data rolled up, the clean up will not be done ( see CIQ.ChartEngine#dontRoll ).

See CIQ.ChartEngine#cleanupGaps, for more details.

Parameters:
Name Type Argument Description
quotes array

The quote array to be gap-filled

chart CIQ.ChartEngine.Chart <optional>

Chart object to target.

params object <optional>

Parameters

Properties
Name Type Argument Description
cleanupGaps string <optional>

Pass this in to override the CIQ.ChartEngine#cleanupGaps value.

noCleanupDates boolean <optional>

If true then dates have been cleaned up already by calling CIQ.ChartEngine#doCleanupDates, so do not do so in here.

field string <optional>

Set to a field to fill gaps, or leave out to use chart.defaultPlotField.

Since:
  • 07/01/2015 Now supports cleanups for daily intervals and foreign exchanges instead of just intraday equities.
  • 3.0.7 Added params.cleanupGaps to allow developers to use this function standalone,
  • 5.2.0 Added params.noCleanupDates.
  • 6.0.0 Added params.field.
  • 6.0.0 If params.cleanupGaps is true, use the value of stxx.cleanupGaps. If that's not set, then cleanupGaps is like carry.
Returns:

The quote array with gaps filled in.

Type
array

doubleClick(button, x, y)

Handles all double-clicks on the chart container.

Applies a double-click event to a CIQ.Marker and dispatches the "doubleClick" event, which invokes the doubleClickEventListener.

If the return value of the marker's CIQ.Marker#doubleClick method is truthy, the "doubleClick" event is not dispatched.

Parameters:
Name Type Description
button number

The button used to double-click.

x number

The x-coordinate of the double-click.

y number

The y-coordinate of the double-click.

Since:
  • 8.0.0


dragPlot(cy)

Deprecated since 7.2.0. Use CIQ.ChartEngine#dragPlotOrAxis instead.

Detects whether the plot (series or study) should be dragged to another panel by examining the y-coordinate of the mouse and seeing if it is either over a different panel than the plot or close to another panel (or the top or bottom edge of the chart). If so, the plot is moved to the new panel.

Parameters:
Name Type Description
cy number

Y-coordinate to test.

Since:
  • 7.1.0
  • 7.2.0 Removed functionality. Added console warning.
Deprecated:

dragPlotOrAxis(cx, cy)

Detects whether the plot (series or study) or axis should be dragged to another panel or axis by examining the x and y pixels of the mouse and seeing if it's either over a different panel than the plot or close to another panel (or the top or bottom edge of the chart), or over the axis region or left or right edges of the plot (to signify an axis move). If so, the plot is moved to the new panel or axis, or the axis is moved to another position.

Parameters:
Name Type Description
cx number

X pixel to test.

cy number

Y pixel to test.

Since:

dragYAxis(cx)

Deprecated since 7.2.0. Use CIQ.ChartEngine#dragPlotOrAxis instead.

Detects whether the y-axis should be dragged to another position by examining the x-coordinate of the mouse and seeing if the mouse is over a different position than the axis. If so, the axis is moved to the new position.

Parameters:
Name Type Description
cx number

X-coordinate to test.

Since:
  • 7.1.0
  • 7.2.0 Removed functionality. Added console warning.
Deprecated:

draw( [params])

INJECTABLE Animation Loop

This is the main rendering function in the animation loop. It draws the chart including panels, axis, and drawings. This method is called continually as a user pans or zooms the chart. This would be a typical place to put an injection to add behavior to the chart after a drawing operation is complete.

Parameters:
Name Type Argument Description
params object <optional>

Optional params object. Unused by the draw method itself but can be used to signal to injections the circumstances of the draw method being called.

Properties
Name Type Argument Description
animationEntry boolean <optional>

Set to true if draw is called from an animation.

Since:
  • 8.4.0 Added params param with the animationEntry property.


drawBarChart(panel, style, colorFunction, params)

Animation Loop

This method draws bars on the chart. It is called by CIQ.ChartEngine.AdvancedInjectable#displayChart if a custom colorFunction is defined.

This method should rarely if ever be called directly. Use CIQ.Renderer.Bars or CIQ.ChartEngine#setChartType instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

Panel on which to draw the bars

style object

The canvas style

colorFunction function

A function which accepts an CIQ.ChartEngine and quote as its arguments and returns the appropriate color for drawing that mode. Returning a null will skip that bar

params object

Additional parameters

Properties
Name Type Argument Default Description
type string <optional>

Set to "hlc" to return a bar chart with no open tick

field string <optional>

Optionally set to a series field which has OHLC data stored beneath it in the dataSegment

highlight boolean <optional>

Set to true to indicate plot is highlighted.

yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

Since:
  • 3.0.8 Added params argument to support custom-colored_hlc bars.
  • 5.1.0 Added field and yAxis parameters.
Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object

drawBarTypeChartInner(params)

Animation Loop

Draws a single frame of a bar chart when no custom colorFunction is defined.

It is highly tuned for performance.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Parameters:
Name Type Description
params object

Parameters object containing information about how to render the chart.

Properties
Name Type Description
panel CIQ.ChartEngine.Panel

Panel on which to draw the bars.

style object

The canvas style.

condition number

The requested condition to be drawn. Available types are:
- CIQ.ChartEngine.NONE // No evaluation (black bars).

If CIQ.ChartEngine#colorByCandleDirection is false :
- CIQ.ChartEngine.CLOSEUP // Today's close greater than yesterday's close.
- CIQ.ChartEngine.CLOSEDOWN // Today's close less than yesterday's close.
- CIQ.ChartEngine.CLOSEEVEN // Today's close the same as yesterday's close.

If CIQ.ChartEngine#colorByCandleDirection is true :
- CIQ.ChartEngine.CANDLEUP // Today's close greater than today's open.
- CIQ.ChartEngine.CANDLEDOWN // Today's close less than today's open.
- CIQ.ChartEngine.CANDLEEVEN // Today's close equal to today's open.

Since:
  • 5.1.0 Some new params properties were added, not documented.


drawBaselineChart(panel, params)

Animation Loop

Draws a single frame of a baseline chart.

This method should rarely if ever be called directly. Use CIQ.Renderer.Lines or CIQ.ChartEngine#setChartType instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Unless params are set, uses the following CSS styles for standard baselines:

  • stx_baseline_up - Color of the portion above the baseline
  • stx_baseline_down - Color of the portion below the baseline
  • stx_baseline - Color of the baseline

Additionally, unless params are set, uses CSS stx_baseline_delta_mountain for mountain baselines:

  • background-color - Background color for mountain
  • color - Optional gradient color
  • width - Optional line width
  • padding - Optional padding between the baseline and the mountain shading

Alternatively you can use CIQ.ChartEngine#setLineStyle to override the CSS style.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel on which to draw the baseline chart

params object

Configuration parameters

Properties
Name Type Argument Default Description
yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

style string <optional>

The style selector which contains the styling for the mountain chart if mountain selected. Defaults to stx_baseline_delta_mountain.

field string <optional>

Set to override the field to be plotted. Default is chart.defaultPlotField which defaults to "Close"

Since:
  • 5.1.0

Returns:

Data generated by the plot, such as colors used.

Type
object

drawCandles(panel, colorFunction, params)

Animation Loop

This method draws either hollow or solid candles on the chart.

It is called from within CIQ.Renderer#drawIndividualSeries if a colorFunction is provided. If there is no color function, CIQ.ChartEngine#drawBarTypeChartInner is used for maximum performance.

It is usually called in 2 passes, one for the inner part and again for the outline (border).

This method should rarely if ever be called directly. Use CIQ.Renderer.Candles or CIQ.ChartEngine#setChartType instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

Panel object on which to draw the candles

colorFunction function

A function which accepts an CIQ.ChartEngine,quote, and mode as its arguments and returns the appropriate color for drawing that mode. Returning a null will skip that bar

params object

Configuration parameters for the candles

Properties
Name Type Argument Default Description
isOutline boolean <optional>

True will draw the borders, False to draw the inside of the candle

isHistogram boolean <optional>

True if the candles represent a histogram, with the low set to 0

isVolume boolean <optional>

Set to true to indicate a volume candle chart, which has variable candle width

field string <optional>

Optionally set to a series field which has OHLC data stored beneath it in the dataSegment

highlight boolean <optional>

Set to true to indicate plot is highlighted.

yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

Since:
  • 5.1.0 Introduced params object to encompass any future flags/fields. Added return object.

Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object

drawChannelChart(panel [, colorFunction] [, params])

Animation Loop

Draws a channel chart, shading the areas between a high and the close and between a low and the close.

The high, low, and close can be redefined to other fields within the parameters.

This method should rarely if ever be called directly. Use CIQ.Renderer.Lines or CIQ.ChartEngine#setChartType instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

The high line, low line, and respective shading are controlled by the following styles, unless overridden in the params:

  • stx_channel_up - Color of the high line and shading.
  • stx_channel_down - Color of the low line and shading. The close line color as well as all of the line widths are controlled by the style stx_line_chart, unless params are set.
Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel on which to draw the line chart.

colorFunction function <optional>

A function that accepts a CIQ.ChartEngine and quote as its arguments and returns the appropriate color for drawing that mode. Returning a null skips that bar. If not passed as an argument, uses a default color.

params object <optional>

Listing of parameters to use when plotting the channel chart.

Properties
Name Type Argument Description
skipTransform boolean <optional>

If true, any transformations (such as comparison charting) are applied.

label boolean <optional>

If true, the y-axis is marked with the value of the right-hand intercept of the line.

noSlopes boolean <optional>

If set, the chart will draw horizontal bars with no vertical lines.

step boolean <optional>

If set, the chart will resemble a step chart. Horizontal lines will begin at the center of the bar.

tension number <optional>

Tension for splining.

highlight boolean <optional>

If set, lines are twice as wide.

color string <optional>

The color for the close line. Defaults to CSS style.

border_color_down string <optional>

The color for the high line. Defaults to CSS style.

border_color_up string <optional>

The color for the low line. Defaults to CSS style.

pattern string <optional>

The pattern for the line ("solid","dashed","dotted"). Defaults to CSS style.

width number <optional>

The width in pixels for the line. Defaults to CSS style.

gapDisplayStyle object <optional>

Gap object as created by CIQ.ChartEngine#setGapLines. If not set chart.gaplines is used.

labelDecimalPlaces boolean <optional>

Specifies the number of decimal places to print on the label. If not set, it will match the y-axis.

style string <optional>

The style selector, which contains the styling for the lines (width and color).

returnObject boolean <optional>

Set to true for return value of the function to be object as described below, otherwise returns only array of colors used.

Since:
  • 7.3.0

Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the close line (points).

Type
object

drawCrossSection(params)

Draws a cross section chart.

This function is invoked by chart internals as part of the draw loop if the cross section plug-in has been initialized. The function should rarely if ever be called directly.

Parameters:
Name Type Description
params object

Rendering parameters.

Properties
Name Type Argument Description
panel CIQ.ChartEngine.Panel <optional>

Panel where the chart is rendered.

shiftRight number <optional>

Number of pixels to shift the line start if using a left-hand side buffer.

Since:
  • 7.3.0
  • 8.3.0 Renamed from CIQ.ChartEngine.prototype.drawTermStructure.

drawCrossSectionPoints()

Draws the data points of a cross section curve, including the mouse-over highlighting and the highlighting that indicates a data point has been recently updated.

Since:
  • 7.5.0
  • 8.3.0 Renamed from CIQ.ChartEngine.prototype.drawTermStructurePoints.

drawCrossSectionShading(params)

Draws the shading for a cross section chart. Method will call CIQ.CrossSection#getInstrumentShadingColor and expect an RGBA value. If the alpha value is not returned, a default of 0.3 is used.

This function is invoked by chart internals as part of the draw loop if the cross section plug-in has been initialized. The function should rarely if ever be called directly.

Parameters:
Name Type Description
params object

Rendering parameters.

Properties
Name Type Argument Description
panel CIQ.ChartEngine.Panel <optional>

Panel where the shading is rendered.

Since:
  • 7.3.0
  • 8.3.0 Renamed from CIQ.ChartEngine.prototype.drawTermStructureShading.

drawCrossSectionSpreads()

Draws curve spreads on a cross section chart, including the guidelines between data points and the numeric values of the spreads.

Since:
  • 7.5.0
  • 8.3.0 Renamed from CIQ.ChartEngine.prototype.drawTermStructureSpreads.

drawHeatmap(params, seriesParams)

Animation Loop

Draws a generic heatmap for the chart.

Use CIQ.Renderer.Heatmap if the histogram is composed of multiple series, each representing a different color group.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

For advanced heatmap implementations where all the data is received already with a color for each datapoint, use an injection that directly calls CIQ.ChartEngine#drawHeatmap as outlined in this example:

Parameters:
Name Type Description
params object

Parameters to control the heatmap itself

Properties
Name Type Default Description
panel string

The name of the panel to put the heatmap on

name string "Data"

Name of the heatmap.

height number

Height of each cell, in yaxis units. If omitted, will use (10 ^ 1-(chart.panel.decimalPlaces||chart.decimalPlaces))

widthFactor number

Width of each call as a percentage of the candleWidth, valid values are 0.00-1.00.

showSize boolean

If heatmap cells are presented in array format, set to true to display the size as text within the cell.

seriesParams array

Parameters to control color and opacity of each cell. Each array element of seriesParams is an object having the following members:

Properties
Name Type Description
field string

Name of the field in the dataSet to use for the part in the stack

border_color string

Color to use to draw the border (null to not draw)

color string

Color to use to fill (null to not draw)

opacity number | object

Opacity to use to fill (0.0-1.0) or use alpha from colors. Set to an object of the form {min:x,max:y} to set opacity for each cell proportionally within that range, based on its percentage. min - lowest opacity to use max - highest opacity to use

Since:
  • 2015-11-1
  • 6.2.0 Enhanced to allow array data of [price,size,alpha] so opacity can be individually set per cell.
  • 6.2.0 Added params.showSize.

drawHistogram(params, seriesParams)

Animation Loop

Draws a generic histogram for the chart.

This method should rarely if ever be called directly. Use CIQ.Renderer.Histogram or CIQ.ChartEngine#setChartType instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Note that if negative values are present, the function will not draw bars pointing downwards; instead the baseline of the histogram will be adjusted to the minimum value detected, and all bars will rise upward from there.

Visual Reference -stacked:
stacked

Visual Reference -clustered:
clustered

Visual Reference -overlaid:
overlaid

Parameters:
Name Type Description
params object

Parameters to control the histogram itself

Properties
Name Type Argument Default Description
name string <optional>
"Data"

Name of the histogram.

panel CIQ.ChartEngine.Panel <optional>

Panel on which to draw the bars

yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

type string <optional>
"overlaid"

Type of histogram (stacked, clustered, overlaid).

bindToYAxis boolean <optional>
false

For a study, set to true to bind the histogram to the y-axis and to draw it.

heightPercentage number <optional>
0.7

The amount of vertical space to use for the histogram, valid values are 0.00-1.00. Ignored when bindToYAxis==true.

widthFactor number <optional>
0.8

Width of each bar as a percentage of the candleWidth, valid values are 0.00-1.00.

borders boolean <optional>
true

Histogram bar border overide. Set to 'false' to stop drawing borders, even if seriesParams.border_color_X are set.

seriesParams Array.<object>

Parameters to control color and opacity of each part (stack) of the histogram. Each stack is represented by an array element containing an object with the following members:

Properties
Name Type Description
field string

Name of the field in the dataSet to use for the part in the stack

fill_color_up string

Color to use to fill the part when the Close is higher than the previous (#RRGGBB format or null to not draw)

border_color_up string

Color to use to draw the border when the Close is higher than the previous (#RRGGBB format or null to not draw)

opacity_up number

Opacity to use to fill the part when the Close is higher than the previous (0.0-1.0)

fill_color_down string

Color to use to fill the part when the Close is lower than the previous (#RRGGBB format or null to not draw)

border_color_down string

Color to use to draw the border when the Close is lower than the previous (#RRGGBB format or null to not draw)

opacity_down number

Opacity to use to fill the part when the Close is lower than the previous (0.0-1.0)

color_function function

configure colors for each bar (will be used instead of fill_color and border_color. Opacity will be 1).

Parameters:

NameTypeDescription
quoteObjecta CIQ.ChartEngine.Chart#dataSegment element used to decide the color of that particular bar

Returns:

  • Object with the following elements:
NameTypeDescription
fill_colorStringused for fill actions, hex format (#RRGGBB)
border_colorStringused for line actions, hex format (#RRGGBB)

Example:

seriesParams[0].color_function= function(quote){
	if(quote.Low > 100 ) {
		return {
					fill_color: '#FFFFFF',
					border_color: '#00ff87'
				}
	} else {
		return {
					fill_color: '#000000',
					border_color: '#0000FF'
				}
	}
};
Since:
  • 07/01/2015
  • 3.0.0 seriesParams.color_function added to determine the colors of a series bar.
  • 3.0.0 Added params.borders optional component to easily turn borders off.
Example
var params = {
	name: "Volume",
	type: "overlaid",
	heightPercentage: 0.2,
	widthFactor: 0.85,
};
var seriesParams = [
	{
		field: "Volume",
		color_function: function (bar) {
			var value = bar[this.field];
			var colorTuple = {
				fill_color: value > 500 ? "#05FF1F" : "#05054A",
				border_color: "#ABABAB",
			};
			return colorTuple;
		},
	},
];
// this will draw a **single frame** of the histogram.
stxx.drawHistogram(params, seriesParams);

drawHLCBox(params)

Draws a "high/low/close" box on the chart. It can be called on the primary chart panel or on a study panel.

Requires "js/extras/hlcbox.js"

Default colors for this renderer, when used as a basic chart type, are set by CSS style stx_hlcbox_chart. Example:

	.stx_hlcbox_chart {
		color: xxx;
		border-left-color: yyy;
		background-color: zzz;
	}

where xxx is the fillColor, yyy is the borderColor, and zzz is the shadeColor.

Visual Reference: Default
hlc_box

Visual Reference: Shaded Box
hlc_shaded_box

Parameters:
Name Type Description
params object

Rendering parameters

Properties
Name Type Argument Default Description
shaded boolean <optional>

True for shaded box

fillColor string <optional>

Interior color of bar

borderColor string <optional>

Border color of bar

shadeColor string <optional>

Shading/Close color of bar

panel CIQ.ChartEngine.Panel <optional>

Panel to render upon

high string <optional>
High

Optional override of High field name

low string <optional>
Low

Optional override of Low field name

close string <optional>
Close

Optional override of Close field name

clip boolean <optional>
true

Set to false to disable clipping to plot area

widthFactor number <optional>

If set, will use as the fraction of the candlewidth to use for the width of the bars

Version:
  • ChartIQ Extras Package
Since:
  • 4.0.0
  • 5.1.0 You can now set as primary chart type without an injection simply by calling: stxx.setChartType("hlc_box"); or stxx.setChartType("hlc_shaded_box");. You must include extras/hlcbox.js.
  • 5.1.0 Now returns an object.
Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object
Examples

Used as a primary chart type :

stxx.setChartType("hlc_box");
// or
stxx.setChartType("hlc_shaded_box");

Used as an additional series :

stxx.addSeries("GE", { renderer: "HLCBox" });

Used as in a study panel :

CIQ.Studies.studyLibrary["Bollinger Profile"] = {
	name: "Bollinger Profile",
	calculateFN: CIQ.Studies.calculateBollinger,
	seriesFN: function (stx, sd, quotes) {
		stx.drawHLCBox({
			panel: stx.panels[sd.panel],
			fillColor: sd.outputs["Bollinger Profile Top"],
			shadeColor: sd.outputs["Bollinger Profile Median"],
			shaded: true,
			high: "Bollinger Profile Top " + sd.name,
			low: "Bollinger Profile Bottom " + sd.name,
			close: "Bollinger Profile Median " + sd.name,
			widthFactor: 0.9,
		});
	},
	inputs: {
		Field: "field",
		Period: 20,
		"Standard Deviations": 2,
		"Moving Average Type": "ma",
		"Channel Fill": true,
	},
	outputs: {
		"Bollinger Profile Top": "auto",
		"Bollinger Profile Median": "auto",
		"Bollinger Profile Bottom": "auto",
	},
	attributes: {
		"Standard Deviations": { min: 0.1, step: 0.1 },
	},
};

drawingClick(panel, x, y)

This is called to send a potential click event to an active drawing, if one is active.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel in which the click occurred

x number

The X pixel location of the click

y number

The y pixel location of the click

Returns:

Returns true if a drawing is active and received the click

Type
boolean

drawLineChart(panel, style [, colorFunction] [, params])

Animation Loop

Draws a single frame of a line chart.

This method should rarely if ever be called directly. Use CIQ.Renderer.Lines, CIQ.ChartEngine#setChartType or CIQ.ChartEngine#addSeries instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Uses CSS style stx_line_chart to control width and color of line charts, unless params are set.

The default color function for the colored line chart uses the following CSS styles:

  • stx_line_up - Color of the uptick portion of the line
  • stx_line_down - Color of the downtick portion of the line
Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel on which to draw the line chart

style string

The style selector which contains the styling for the bar (width and color)

colorFunction function <optional>

A function which accepts an CIQ.ChartEngine and quote as its arguments and returns the appropriate color for drawing that mode. Returning a null will skip that bar. If not passed as an argument, will use a default color.

params object <optional>

Listing of parameters to use when plotting the line chart.

Properties
Name Type Argument Description
skipTransform boolean <optional>

If true then any transformations (such as comparison charting) will not be applied

label boolean <optional>

If true then the y-axis will be marked with the value of the right-hand intercept of the line

noSlopes boolean <optional>

If set then chart will draw horizontal bars with no vertical lines.

step boolean <optional>

If set then chart will resemble a step chart. Horizontal lines will begin at the center of the bar.

tension number <optional>

Tension for splining.

highlight boolean <optional>

If set then line will be twice as wide.

color string <optional>

The color for the line. Defaults to CSS style

pattern string <optional>

The pattern for the line ("solid","dashed","dotted"). Defaults to CSS style

width number <optional>

The width in pixels for the line. Defaults to CSS style

gapDisplayStyle object <optional>

Gap object as created by CIQ.ChartEngine#setGapLines. If not set chart.gaplines will be used.

labelDecimalPlaces boolean <optional>

Specifies the number of decimal places to print on the label. If not set then it will match the y-axis.

returnObject boolean <optional>

Set to true for return value of the function to be object as described in doc below, otherwise returns only array of colors used.

Since:
  • 15-07-01 Changed signature from chart to panel.
  • 3.0.0 Added params.
  • 5.2.0 params.gaps has been deprecated and replaced with params.gapDisplayStyle.
  • 6.0.0 params.gapDisplayStyle can be set to false to suppress all gap drawing.
Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object

drawMarkers()

Animation Loop

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

See Markers tutorials for additional implementation instructions.

Since:

drawMarketDepth(params)

Draws a market depth chart.

This method should rarely if ever be called directly. Use CIQ.Renderer.MarketDepth or CIQ.ChartEngine#setChartType instead.

Here is a sample JSFiddle illustrating how to render a stand-alone market depth chart:

Note: Requires the Active Trader plug-in. See CIQ.ChartEngine#updateCurrentMarketData for data requirements.

Default colors for this renderer, when used as a basic chart type, are set by the CSS style stx_marketdepth_chart.

Example:

.stx_marketdepth_chart {
    border-right-style: solid;  /* Target dot pattern */
    border-top-style: solid;  /* Mountain peak pattern */
    color: inherit;  /* Mid-price color */
    font: bold 28px Roboto, Helvetica, sans-serif;  /* Mid-price font */
    opacity: 0.5;  /* Mountain shading opacity */
    width: 3px;  /* Mountain peak width */
}
.stx_marketdepth_chart.bid {
    background-color: #8cc176;  /* Base of mountain gradient */
    border-left-color: #8cc176;  /* Top of mountain gradient */
    border-right-color: #8cc176;  /* Color of crosshairs target dot */
    border-right-width: 4px;  /* Width of target dot */
    border-top-right-radius: 3px;  /* Radius of corner of target dot */
    border-top-color: #8cc176;  /* Peak of mountain */
    border-bottom-color: transparent;  /* Border of volume bars */
    color: #8cc176;  /* Fill of volume bars */
}
.stx_marketdepth_chart.ask {
    background-color: #b82c0c;  /* Base of mountain gradient */
    border-left-color: #b82c0c;  /* Top of mountain gradient */
    border-right-color: #b82c0c;  /* Color of crosshairs target dot */
    border-right-width: 4px;  /* Width of target dot */
    border-top-right-radius: 0px;  /* Radius of corner of target dot */
    border-top-color: #b82c0c;  /* Peak of mountain */
    border-bottom-color: transparent;  /* Border of volume bars */
    color: #b82c0c;  /* Fill of volume bars */
}

Visual Reference: stxx.setChartType("marketdepth"); marketdepth

Visual Reference: stxx.setChartType("mountain_marketdepth"); mountain_marketdepth

Visual Reference: stxx.setChartType("mountain_volume_marketdepth"); mountain_volume_marketdepth

Parameters:
Name Type Description
params object

Rendering parameters.

Properties
Name Type Argument Description
panel CIQ.ChartEngine.Panel <optional>

Panel to render upon.

mountain boolean <optional>

True to shade beneath the bid and ask lines.

volume boolean <optional>

True to show volume as a histogram.

step boolean <optional>

True to draw the bid and ask lines as steps.

tension number <optional>

A numeric value between 0 and 1 to draw the bid and ask lines as splines.

bidPeakColor string <optional>

Color of bid line. Also the color of the bid blocks in the L2 heat map.

askPeakColor string <optional>

Color of ask line. Also the color of the ask blocks in the L2 heat map.

bidBaseColor string <optional>

Color of base of mountain below bid. Contrast with bidColor to create a gradient.

askBaseColor string <optional>

Color of base of mountain below ask. Contrast with askColor to create a gradient.

bidColor string <optional>

Color of top of mountain below bid. Contrast with bidBaseColor to create a gradient.

askColor string <optional>

Color of top of mountain below ask. Contrast with askBaseColor to create a gradient.

bidVolumeColor string <optional>

Color of bid volume bars.

askVolumeColor string <optional>

Color of ask volume bars.

shadeOpacity string <optional>

Opacity of mountain shading.

width number <optional>

Width of bid/ask line, in pixels.

pattern number <optional>

Pattern of bid/ask line: "solid", "dashed" or "dotted".

widthFactor number <optional>

Percentage of the width of the chart to be used to represent the range of data.

heightFactor number <optional>

Percentage of the height of the chart to be used to represent the range of data.

fontFamily string <optional>

Font name for price drawn on screen.

fontSize number <optional>

Font size for price drawn on screen.

Version:
  • ChartIQ Active Trader Package
Since:
  • 6.1.0
  • 6.1.1 Added bidBaseColor and askBaseColor parameters to replace baseColor.
  • 6.3.0 Added shadeOpacity, bidVolumeColor, askVolumeColor, bidPeakColor, and askPeakColor parameters.
Returns:

Empty object.

Type
object
Example
// Create a stand-alone market depth chart.
let stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });
stxx.setChartType("step_marketdepth");
stxx.chart.tension = 0.5;
stxx.loadChart("SPY", {
	masterData: data,
	periodicity: {
		interval: "tick",
	},
});

// Update the data call.
stxx.updateCurrentMarketData(newData);
stxx.draw();

drawMountainChart(panel, params [, colorFunction])

Animation Loop

Draws a single frame of a mountain chart.

This method should rarely if ever be called directly. Use CIQ.Renderer.Lines or CIQ.ChartEngine#setChartType instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Uses CSS style style stx_mountain_chart, or stx_colored_mountain_chart to control mountain colors and line width, unless params are set.

  • background-color - Background color for mountain (top of the mountain, if grading in combination with 'color')
  • border-top-color - Optional gradient color (bottom of the mountain, if grading in combination with background-color')
  • border - Optional line color
  • width - Optional line width

Example using CIQ.ChartEngine#setStyle (alternatively, the CSS style can be directly overwritten on a CSS file):

stxx.setStyle("stx_mountain_chart","borderTopColor","blue");
stxx.setStyle("stx_mountain_chart","backgroundColor","purple");

The default color function for the colored mountain chart uses the following CSS styles:

  • stx_line_up - Color of the uptick portion of the line
  • stx_line_down - Color of the downtick portion of the line
  • stx_line_chart - Default line color if no up or down is defined.

Alternatively you can use CIQ.ChartEngine#setLineStyle to override the CSS style.

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel on which to draw the mountain chart

params object

Configuration parameters

Properties
Name Type Argument Default Description
yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

style string <optional>

The CSS style selector which contains the styling for the bar (width and color). Defaults to stx_mountain_chart.

reverse boolean <optional>

Set to true to draw a "reverse" mountain chart

field string <optional>

Set to override the field to be plotted. Default is chart.defaultPlotField which defaults to "Close"

gapDisplayStyle object <optional>

Gap object as created by CIQ.ChartEngine#setGapLines. If not set chart.gaplines will be used.

returnObject boolean <optional>

Set to true for return value of the function to be object as described in doc below, otherwise returns only array of colors used.

colorFunction function <optional>

A function which accepts an CIQ.ChartEngine and quote as its arguments and returns the appropriate color for drawing that mode. Returning a null will skip that line segment. If not passed as an argument, will use the color set in the calling function.

Since:
  • 15-07-01 Changed signature from chart to panel.
  • 05-2016-10 Function now accepts a style, colorFunction argument, and returns colors used in the line plot.
  • 4.0.0 Changed style to an object argument called parameters so yAxis, field and reverse can be supported.
  • 4.0.0 Return value is now an object.
  • 5.2.0 params.gaps has been deprecated and replaced with params.gapDisplayStyle.
  • 6.0.0 params.gapDisplayStyle can be set to false to suppress all gap drawing.
Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object

drawPointFigureChart(panel, style, condition, parameters)

Draws the Point and Figure Chart. Called by CIQ.ChartEngine.AdvancedInjectable#displayChart via the Aggregations renderer

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

Panel to draw chart in.

style string

Style to use for coloring. Uses stx_pandf_down and stx_pandf_up styles for colors. See example for exact format.

condition string

The condition to draw, 'X' or 'O'

parameters object

Configuration parameters for the colors (border_color_up and border_color_down)

Version:
  • ChartIQ Advanced Package
Since:
  • 2015-04-24
  • 5.1.0 Added params parameter.
Example
.stx_pandf_down {
	color: #ff0000;
	padding: 2px 0px 2px 0px;
	width: 2px;
}
.stx_pandf_up {
	color: #00ff00;
	padding: 2px 0px 2px 0px;
	width: 2px;
}

drawShadows(panel, colorFunction, params)

Animation Loop

This method draws the shadows (wicks) for candles on the chart.

It is called from within CIQ.Renderer#drawIndividualSeries if a colorFunction is provided. If there is no color function, CIQ.ChartEngine#drawBarTypeChartInner is used for maximum performance.

This method should rarely if ever be called directly. Use CIQ.Renderer.Candles or CIQ.ChartEngine#setChartType instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

Panel on which to draw the wicks

colorFunction function

A function which accepts an CIQ.ChartEngine,quote, and mode as its arguments and returns the appropriate color for drawing that mode. Returning a null will skip that bar

params object

Configuration parameters for the shadows

Properties
Name Type Argument Default Description
isVolume boolean <optional>

Set to true to indicate a volume candle chart, which has variable candle width

field string <optional>

Optionally set to a series field which has OHLC data stored beneath it in the dataSegment

highlight boolean <optional>

Set to true to indicate plot is highlighted.

yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

Since:
  • 5.1.0 Introduced params object to encompass any future flags/fields.


drawWaveChart(panel, params)

Animation Loop

Draws a "wave" chart.

A wave chart extrapolates intraday movement from OHLC and creates 4 data points from a single candle, for instance to create a pseudo-intraday chart from daily data.

This method should rarely if ever be called directly. Use CIQ.Renderer.Lines or CIQ.ChartEngine#setChartType instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Parameters:
Name Type Description
panel string

The panel on the chart engine instance on which to draw the wave chart

params object

Additional parameters controlling the rendering

Properties
Name Type Argument Default Description
yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

field string <optional>

Set to a symbol to indicate a series within the dataSet to plot, rather than the main series

highlight boolean <optional>

Set to true to indicate plot is highlighted.

Since:
  • 5.1.0 Added params object and return value.

Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object
Example
// call it from the chart menu provided in the sample templates
<li stxToggle="stxx.setChartType('wave')">Wave</li>

electNewPanelOwner(panel [, yAxisHint])

Chooses a new study or renderer to be the "owner" of a panel. This affects the name of the panel as well as the main y-axis. If no new owner can be found, panel is closed. Calls modifyPanel.

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel | string

The panel that contains the study or renderer.

yAxisHint CIQ.ChartEngine.YAxis <optional>

Optional y-axis from which to try to elect a new panel owner.

Since:
  • 7.1.0
  • 7.2.0 Added the yAxisHint argument.
Returns:

The new name of the panel.

Type
string

electNewYAxisOwner(yAxis)

Chooses a new study or renderer to be the owner of a y-axis. This affects the axis name of any studies upon it as well.

Parameters:
Name Type Description
yAxis CIQ.ChartEngine.YAxis

The y-axis owned by the new study or renderer.

Since:
  • 7.2.0

Returns:

The new name of the y-axis.

Type
string

embedVisualization(attributes)

Convenience function that embeds a CIQ.Visualization in the canvas area. Embedding is accomplished by placing the visualization object within the chart engine's canvas shim, an area behind the main canvas. Placing an object in the canvas shim creates the appearance that the chart plot is on top of the object. If using the chart background canvas (the default), the object appears on top of the gridlines and axes.

Attributes are passed into renderFunction, so additional attributes can be added specific to the function. Note: If a valid container attribute is supplied, that container will be cloned and appended into the chart's canvasShim.

Parameters:
Name Type Description
attributes object

Parameters to be used when creating the object.

Properties
Name Type Argument Description
renderFunction function

The function that generates the object. Takes data and attributes as arguments and returns an object element.

container HTMLElement | string <optional>

Element that is cloned and used to contain the object (or selector thereof). If omitted, a container element is created with 300 x 300 pixel dimensions.

id string <optional>

Optional id attribute to assign to the object.

Since:
  • 7.4.0

Returns:

A handle to the object created, see CIQ.Visualization.

Type
CIQ.Visualization

endClip()

Completes a bounded clipping operation. See CIQ.ChartEngine#startClip.


exportDrawings()

Exports (serializes) all of the drawings on the chart(s) so that they can be saved to an external database and later imported with CIQ.ChartEngine#importDrawings.

Since:
  • 3.0.0 Replaces serializeDrawings.

See:
Returns:

An array of serialized objects representing each drawing

Type
array

exportLayout(withSymbols)

Exports the current layout into a serialized form. The returned object can be passed into CIQ.ChartEngine#importLayout to restore the layout at a future time.

This method will also save any programmatically activated range or span setting that is still active.

Note: A set range or span that is manually modified by a user when zooming, panning, or changing periodicity will be nullified. So, if you wish to always record the current range of a chart for future restoration, you must use the following process:

1- Add the following injection to save the range on every draw operation:

stxx.append("draw", function() {
   console.log('recording range');
    delete stxx.layout.setSpan;
    stxx.layout.range={padding: stxx.preferences.whitespace,
       dtLeft: stxx.chart.dataSegment[0].DT,
       dtRight: stxx.chart.dataSegment[stxx.chart.dataSegment.length - 1].DT,
        periodicity: {
            period: stxx.layout.periodicity,
            interval: stxx.layout.interval,
            timeUnit: stxx.layout.timeUnit
        }
    }
    saveLayout({stx:stxx});
});

2- Make sure you call importLayout with params preserveTicksAndCandleWidth set to false

More on injections here: Using the Injection API

Parameters:
Name Type Description
withSymbols boolean

If true, include the chart's current primary symbol and any secondary symbols from any CIQ.ChartEngine#addSeries operation, if using a quote feed. Studies will be excluded from this object. The resulting list will be in the symbols element of the serialized object.

Since:
  • 05-2016-10 Added the withSymbols parameter.
  • 5.0.0 obj.symbols is explicitly removed from the serialization when withSymbols is not true.
Returns:

The serialized form of the layout.

Type
object

exportPreferences()

Exports the CIQ.ChartEngine#preferences for external storage. Can then be imported again after being parsed with CIQ.ChartEngine#importPreferences

Since:
  • 4.0.0

Returns:
Type
CIQ.ChartEngine#preferences

fillScreen()

Adjusts the candleWidth to eliminate left-side gaps on the chart if not enough bars are loaded.

Used by the stretchToFillScreen parameter of CIQ.ChartEngine#loadChart

Since:
  • 4.0.0 This function is now public.


findBaselineHandle(e, grabStart)

Checks an emitted event to determine whether a baseline handle DOM element is the event target or is in the composed path of the event. If so, sets CIQ.ChartEngine#currentBaseline to the renderer of the baseline positioned by the handle.

Parameters:
Name Type Description
e Event

The event that is checked to determine whether a baseline handle is the event target or is in the propagation path of the event.

grabStart boolean

If true (and a baseline handle is the event target or is in the event path), baseline repositioning is initiated.

Since:
  • 8.2.0

Returns:

True if a baseline handle is the event target or is in the path of the event, otherwise false.

Type
boolean

findHighlights(isTap, clearOnly)

Finds any objects that should be highlighted by the current crosshair position. All drawing objects have their highlight() method called in order that they may draw themselves appropriately.

Parameters:
Name Type Description
isTap boolean

If true then it indicates that the user tapped the screen on a touch device, and thus a wider radius is used to determine which objects might have been highlighted.

clearOnly boolean

Set to true to clear highlights

Since:

flipChart(flip)

Causes the primary y-axis and all linked drawings, series and studies to display inverted (flipped) from its previous state.

Calling this method multiple times will cause a reciprocal effect. So calling it on a upside-down chart will cause it to display normally and calling it on a normal chart will cause it to display upside-down.

Sets CIQ.ChartEngine.layout.flipped and CIQ.ChartEngine.YAxis#flipped for the main chart.

To manage this functionality on secondary axis directly configure its CIQ.ChartEngine.YAxis#flipped property.

Parameters:
Name Type Description
flip boolean

True to flip chart, false to restore it

Since:
  • 6.3.0


formatPrice(price, panel)

Formats a price according to the decimalPlaces specified in either the panel or chart. It will then format to international standards if the internationalizer is set. This method does not condense prices.

Parameters:
Name Type Description
price number

The price to be formatted

panel CIQ.ChartEngine.Panel

The panel to use to determine the number of decimal places.

Since:
  • 6.2.0 Return value will always be a string.

Returns:

The formatted price

Type
string

formatYAxisPrice(price, panel [, requestedDecimalPlaces] [, yAxis] [, internationalize])

Formats prices for the Y-axis.

Intelligently computes the decimal places based on the size of the y-axis ticks.

If the panel is a study panel, then prices will be condensed by CIQ.condenseInt if the price differential between two ticks (priceTick) is equal or over 1000.
For the primary panel prices will be condensed if the price differential between two ticks is equal or over 20000.
This can be overridden by manually setting CIQ.ChartEngine.YAxis#decimalPlaces.

You can call this method to ensure that any prices that you are using outside of the chart are formatted the same as the prices on the y-axis.

Parameters:
Name Type Argument Description
price number

The price to be formatted

panel CIQ.ChartEngine.Panel

The panel for the y-axis.

requestedDecimalPlaces number <optional>

Number of decimal places, otherwise it will be determined by the yaxis setting, or if not set, determined automatically

yAxis CIQ.ChartEngine.YAxis <optional>

yAxis. If not present, the panel's y-axis will be used.

internationalize boolean <optional>

Normally this function will return an internationalized result. Set this param to false to bypass.

Since:
  • 4.0.0 CondenseInt will be called only if yaxis priceTick equal or over 1000 for studies and 20000 for primary axis, rather than 100.
  • 5.2.0 All axes will be condensed to some degree to allow for more uniform decimal precision.
  • 6.1.0 Added internationalize parameter.
Returns:

The formatted price

Type
number

futureTickIfDisplayed(marker)

Figures out the position of a future marker but only if it is displayed on the screen.

Parameters:
Name Type Description
marker CIQ.Marker

The marker to check


getBackgroundCanvas(chart)

Determines the appropriate canvas on which to draw background plots (gridlines and axes). If CIQ.ChartEngine#useBackgroundCanvas is true, background plots are drawn on the chart background canvas; if false, on the chart main canvas.

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

The chart from which the canvas is obtained.

Since:
  • 7.4.0

Returns:

Either the chart's main canvas or background canvas, depending on the value of CIQ.ChartEngine#useBackgroundCanvas.

Type
HTMLElement

getBarBounds(quote)

The above_candle and below_candle y-positioner will usually use the high and low to place the marker. However, some chart renderings will draw the extent of the bar either inside or outside the high/low range. For those chart types, this function will return the actual high/low to be used by the marker placement function. This is only valid when CIQ.Renderer#highLowBars is true. Currently this function will handle p&f and histogram chart types. For any other chart type, define "markerHigh" and "markerLow" for each bar in the dataSet/dataSegment and these will be honored and returned. Note: This function may be used with any markerPlacement function to give the lowest and highest point of the bar.

Parameters:
Name Type Description
quote Object

The bar's data. This can come from the chart.dataSet

Since:
  • 3.0.0
  • 6.2.0 Will consider Open and Close if High and/or Low are missing from quote.
Returns:

The high and low for the marker

Type
Object

getCanvasColor(className)

Returns the canvas color specified in the class name.

Parameters:
Name Type Description
className string

The class name

Returns:

The color specified (May be undefined if none specified)

Type
string

getCanvasFontSize(className)

Returns the font size defined by the requested class name.

Defaults to 12 if undefined. Use this to determine vertical heights so that lettering isn't clipped.

Parameters:
Name Type Description
className string

Class name

Returns:

The font size (px is stripped)

Type
number

getDataSegment( [chart])

Returns the visible portion of the dataSegment. A bar is considered visible if its midpoint is within the chart window. This is different than chart.dataSegment which includes any partially visible candles and possibly the very next data point to be displayed.

Parameters:
Name Type Argument Description
chart CIQ.ChartEngine.Chart <optional>

Chart from which to return the dataSegment

Since:
  • 5.2.0

Returns:

The visible bars of the dataSegment

Type
array

getDefaultColor()

Animation Loop

Determines the default color for lines and studies drawn on the screen. This is black unless the background color of the chart has a "value" greater than 65%. The result is that this.defaultColor contains the default color.


getFirstLastDataRecord(data, field [, last])

Returns the first or last record in a quotes array (e.g. masterData, dataSet) containing the requested field. If no record is found, will return null

Parameters:
Name Type Argument Description
data array

quotes array in which to search

field string

field to search for

last boolean <optional>

Switch to reverse direction; default is to find the first record. Set to true to find the last record.

Since:
  • 5.2.0

Returns:

The found record, or null if not found

Type
object

getLabelOffsetInPixels(chart, chartType)

Returns the minimum spacing required between the latest tick on the chart and the price label to prevent data form colliding with the label, which depending on style, may protrude into the chart area ( ie. roundRectArrow ).

See CIQ.ChartEngine#yaxisLabelStyle to set different label styles

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

The specific chart

chartType string

The chart rendering type (candle, line, etc)

Since:
  • 4.0.0
  • 5.1.0 Removed stx parameter.
Returns:

pixels to offset

Type
number

getNextBar(chart, field, bar)

Finds the next element after dataSegment[bar] in the dataSet which has data for field

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

An instance of CIQ.ChartEngine.Chart

field string

The field to check for data

bar number

The index into the dataSegment

Since:
  • 4.0.0

Returns:

dataSet element which has data

Type
object

getNextInterval(DT [, period] [, useDataZone])

Convenience function returns the next or previous interval from the provided date-time at the current chart's periodicity. See CIQ.Market and CIQ.Market.Iterator for more details.

For 'tick' intervals, since there is no predictable periodicity, the next interval will be determined by CIQ.ChartEngine.XAxis#futureTicksInterval

Parameters:
Name Type Argument Default Description
DT date

A JavaScript Date representing the base time for the request in CIQ.ChartEngine#dataZone timezone.

period number <optional>

The number of periods to jump. Defaults to 1. Can be negative to go back in time.

useDataZone boolean <optional>
true

By default the next interval will be returned in CIQ.ChartEngine#dataZone. Set to false to receive a date in CIQ.ChartEngine#displayZone instead.

Returns:

The next interval date

Type
date

getPeriodicity()

Returns the current periodicity of the chart in the format required by CIQ.ChartEngine#setPeriodicity.

Since:
  • 7.5.0

See:
Returns:

An object literal containing the properties that define the periodicity: period, interval, and timeUnit; for example,
{period: 2, interval: 5, timeUnit: "minute"}.

Type
CIQ.ChartEngine~PeriodicityParameters

getPreviousBar(chart, field, bar)

Finds the previous element before dataSegment[bar] in the dataSet which has data for field

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

An instance of CIQ.ChartEngine.Chart

field string

The field to check for data

bar number

The index into the dataSegment

Since:
  • 4.0.0

Returns:

dataSet element which has data

Type
object

getRenderedItems()

Returns an array of all the securities, series, and overlays that are drawn on the current panel.

Since:
  • 7.2.0

Returns:

The fields — in object-chain form — of the currently rendered objects.

Type
Array.<object>

getRendererFromSeries(seriesId)

Returns the first renderer found that contains a series, or null if not found.

Parameters:
Name Type Description
seriesId string

ID of the series to find.

Since:
  • 7.3.0

Returns:

The matching series renderer if found.

Type
object

getSeries(params)

Returns an array of series that match the given filters.

If any series is an equation chart then the equation will be searched for the matching symbol.

Parameters:
Name Type Description
params object

Parameters

Properties
Name Type Argument Description
symbol string <optional>

Filter for only series that contain this symbol

symbolObject object <optional>

Filter for only series that contain this symbolObject

includeMaster boolean <optional>

If true then the masterSymbol will be checked for a match too. A blank object will be returned. You should only use this if you're just using this to look for yes/no dependency on a symbol.

chart CIQ.ChartEngine.Chart <optional>

Chart object to target

Since:
  • 4.0.0

Returns:

Array of series descriptors

Type
array

getSeriesRenderer(name)

Retrieves a series renderer from the chart

Parameters:
Name Type Description
name string

Handle to access the renderer (params.name)

Since:
  • 07/01/2015

Returns:

the matching series renderer if found

Type
object

getStartDateOffset()

Returns the offset from the left side of the screen for the first element on the chart screen. Most times this will be zero except when a user has scrolled past the end of the chart in which case it will be a positive number. This can be used to recreate a saved chart.

Returns:

The offset from the left of the chart.

Type
number

getSymbols(params)

Returns an array of all symbols currently required to be loaded by the quote feed. The returned array contains an object for each symbol containing symbol, symbolObject, interval, and periodicity.

Parameters:
Name Type Description
params object

Control parameters.

Properties
Name Type Argument Description
include-parameters boolean <optional>

Set to true to put the series parameters in the return object.

exclude-studies boolean <optional>

Set to true to not include study symbols.

breakout-equations boolean <optional>

Set to true to return component symbols of equations.

exclude-generated boolean <optional>

Set to true to not include symbols which are generated by virtue of another symbol (e.g. PlotComplementer).

Since:
  • 2016-03-11
  • 6.2.0 Added params.breakout-equations parameter.
  • 7.3.0 Added params.exclude-generated parameter.
Returns:

The array of symbol objects required.

Type
array

getYAxisBaseline(yAxis)

Gets the baseline object for a y-axis associated with a baseline.

A y-axis can be associated with only one baseline; and so, can have only one baseline renderer and one baseline object.

Parameters:
Name Type Description
yAxis CIQ.ChartEngine.YAxis

A y-axis associated with a baseline.

Since:
  • 8.2.0

See:
Returns:

The baseline object of the y-axis baseline renderer if the y-axis has a baseline renderer and the baseline parameter of the renderer is an object; otherwise, the default chart baseline object, CIQ.ChartEngine.Chart#baseline.

Type
object

getYAxisBaselineRenderer(yAxis)

Gets the baseline renderer associated with a y-axis.

Since a y-axis can only have one baseline associated with it, this function searches the renderers property of the axis, checking for the first renderer that matches an entry in CIQ.ChartEngine#baselineHelper.

Parameters:
Name Type Description
yAxis CIQ.ChartEngine.YAxis

The y-axis whose list of renderers is checked for a baseline renderer.

Since:
  • 8.2.0

Returns:

The y-axis renderer that renders a baseline or, if a baseline renderer is not associated with the y-axis, null.

Type
CIQ.Renderer | null

getYAxisByField(panel, field)

Retrieves a Y-Axis based on a field which belongs to it.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel

field string

the field to test

Since:
  • 7.0.0

Returns:

matching YAxis or undefined if none exists

Type
CIQ.ChartEngine.YAxis

getYAxisByName(panel, name)

Retrieves a Y-Axis based on its name property

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel

name string

The name of the axis

Since:
  • 5.2.0

Returns:

matching YAxis or undefined if none exists

Type
CIQ.ChartEngine.YAxis

getYAxisCurrentPosition(yAxis, panel)

This method determines and returns the existing position of a y-axis, as set by CIQ.ChartEngine.YAxis#position or CIQ.ChartEngine#setYAxisPosition.

Parameters:
Name Type Description
yAxis CIQ.ChartEngine.YAxis

The YAxis whose position is to be found

panel CIQ.ChartEngine.Panel

The panel which has the axis on it

Since:
  • 6.2.0

Returns:

The position (left, right, or none)

Type
string

grabbingHand()

Turns on the grabbing hand cursor. It does this by appending the class "stx-drag-chart" to the chart container. If this is a problem then just eliminate this function from the prototype.


hideCrosshairs()

Hides enabled crosshairs.

Usually called as part of a custom drawing or overlay to prevent the crosshairs from displaying together with the custom rendering.

See CIQ.ChartEngine.layout[`crosshair`] to enable/disable the crosshairs.


home(params)

Returns the chart to the home position, where the most recent tick is on the right side of the screen.

By default the home() behavior is to maintain the white space currently on the right side of the chart. To align the chart to the right edge instead, set the white space to 0 by calling: stxx.home({whitespace:0}); or stxx.home({maintainWhitespace:false});

If you want to home the chart and also do a full reset of both the x and y axis zoom levels so they revert to the initial default settings, execute this:

stxx.setCandleWidth(8);stxx.home(0);

Keep in mind that certain floating labels, such as the roundRectArrow will prevent the chart from being flush to the right edge even if the white space is 0. This is to prevent bars from being obstructed by the protruding portion of the label.

See CIQ.ChartEngine#getLabelOffsetInPixels and CIQ.ChartEngine#yaxisLabelStyle for more details.

Used by CIQ.ChartEngine.htmlControls.home.

Parameters:
Name Type Description
params object

Object containing the following keys:

Properties
Name Type Argument Default Description
animate boolean <optional>
false

Set to true to animate a smooth scroll to the home position.

maintainWhitespace boolean <optional>
true

Set to true to maintain the currently visible white space on the right of the chart, or to false to align to the right edge.

whitespace number <optional>
0

Override to force a specific amount of whitespace on the right of the chart. This will take precedence over params.maintainWhitespace

chart CIQ.ChartEngine.Chart <optional>

Chart to scroll home. If not defined, all chart objects will be returned to the home position.

Example
stxx.home({ maintainWhitespace: false });

importDrawings(arr)

Imports drawings from an array originally created by CIQ.ChartEngine#exportDrawings. To immediately render the reconstructed drawings, you must call draw(). See Using and Customizing Drawing Tools for more details.

Important: Calling this function in a way that will cause it to run simultaneously with importLayout will damage the results on the layout load. To prevent this, use the CIQ.ChartEngine#importLayout or CIQ.ChartEngine#loadChart callback listeners.

Parameters:
Name Type Description
arr array

An array of serialized drawings

Since:
  • 4.0.0 Replaces reconstructDrawings.

See:
Example
// programmatically add a rectangle
stxx.importDrawings([
	{
		name: "rectangle",
		pnl: "chart",
		col: "transparent",
		fc: "#7DA6F5",
		ptrn: "solid",
		lw: 1.1,
		d0: "20151216030000000",
		d1: "20151216081000000",
		tzo0: 300,
		tzo1: 300,
		v0: 152.5508906882591,
		v1: 143.3385829959514,
	},
]);
// programmatically add a vertical line
stxx.importDrawings([
	{
		name: "vertical",
		pnl: "chart",
		col: "transparent",
		ptrn: "solid",
		lw: 1.1,
		v0: 147.45987854251013,
		d0: "20151216023000000",
		tzo0: 300,
		al: true,
	},
]);
// now render the reconstructed drawings
stxx.draw();

importLayout(config [, params])

QuoteFeed required if params.noDataLoad is set to false

Imports a layout (panels, studies, candleWidth, etc) from a previous serialization. See CIQ.ChartEngine#exportLayout.

There are three ways to use this method:

  1. Preset the layout object in the chart instance, but do not load any data.
    • This is usually used to restore an initial 'symbol independent' general layout (chart type and studies mainly) that will then take effect when loadChart is subsequently called.
    • In this case, exportedLayout should be called using 'withSymbols=false' and the importLayout should have 'noDataLoad=true'.
  2. Load an entire new chart and its data, including primary symbol, additional series, studies, chart type, periodicity and range:
    • In this case, you should not need call loadChart, setPeriodicity setSpan or setRange, addStudy, etc. since it is all restored from the previously exported layout and loaded using the attached quoteFeed.
    • If you still wish to change periodicity, span or range, you must use the CB function to do so.
    • In this case, exportedLayout should be called using 'withSymbols=true' and the importLayout should have 'noDataLoad=false' and 'managePeriodicity=true'.
  3. Reset layout on an already existing chart without changing the primary symbol or adding additional symbols:
    • This is used when restoring a 'view' on an already existing chart from a previous loadChart call. The primary symbol remains the same, no additional series are added, but periodicity, range, studies and chart type are restored from the previously serialized view.
    • In this case, exportedLayout should be called using 'withSymbols=false', and importLayout should have 'noDataLoad=false', managePeriodicity=true', and 'preserveTicksAndCandleWidth=true'.

Important Notes:

  • Please note that studyOverlayEdit and studyPanelEdit event listeners must be set before you call CIQ.ChartEngine#importLayout. Otherwise your imported studies will not have edit capabilities.

  • When symbols are loaded, this function will set the primary symbol (first on the serialized symbol list) with CIQ.ChartEngine#loadChart and any overlayed symbol with CIQ.ChartEngine#addSeries. You must be using a QuoteFeed to use this workflow.

  • This method will not remove any currently loaded series. If your restored layout should not include previously loaded series, you must first iterate trough the CIQ.ChartEngine.Chart#series object, and systematically call CIQ.ChartEngine#removeSeries on each entry.

  • When allowing this method to load data, do not call addSeries, importDrawings or loadChart in a way that will cause them to run simultaneously with this method, or the results of the layout load will be unpredictable. Instead use this method's callback to ensure data is loaded in the right order.

  • Since spans and ranges require changes in data and periodicity, they are only imported if params.managePeriodicity is set to true and params.noDataLoad is set to false. If both range and span are present, range takes precedence.

Parameters:
Name Type Argument Description
config object

A serialized layout generated by CIQ.ChartEngine#exportLayout.

params object <optional>

Layout behavior parameters.

Properties
Name Type Argument Description
noDataLoad boolean <optional>

If true, then any automatic data loading from the quotefeed will be skipped, including setting periodicity, spans or ranges.

Data can only be loaded if a quote feed is attached to the chart.

managePeriodicity boolean <optional>

If true, then the periodicity will be set from the layout, otherwise periodicity will remain as currently set.

If the span/range was saved in the layout, it will be restored using the most optimal periodicity as determined by CIQ.ChartEngine#setSpan.

Periodicity can only be managed if a quote feed is attached to the chart.

Only applicable when noDataLoad = false.

See CIQ.ChartEngine#setPeriodicity for additional details.

preserveTicksAndCandleWidth boolean <optional>

If true then the current candleWidth (horizontal zoom) and scroll (assuming same periodicity) will be maintained and any spans or ranges present in the config will be ignored. Otherwise candle width and span/ranges will be taken from the config and restored.

cb function <optional>

An optional callback function to be executed once the layout has been fully restored.

seriesCB function <optional>

An optional callback function to be executed after each series is restored (to be added to each CIQ.ChartEngine#addSeries call).

Since:
  • 05-2016-10 Symbols are also loaded if included on the serialization.
  • 2016-06-21 preserveTicksAndCandleWidth now defaults to true.
  • 3.0.0 Added noDataLoad parameter.
  • 5.1.0 Will now also import extended hours settings.
  • 5.1.0 Imports the range from layout if it is there to preserve between sessions.
  • 5.2.0 spans and ranges are only executed if managePeriodicity is true and preserveTicksAndCandleWidth is false.

importPreferences(preferences)

Imports a users preferences from a saved location and uses them in the ChartEngine To save preferences see CIQ.ChartEngine#exportPreferences

Parameters:
Name Type Description
preferences object

An object of CIQ.ChartEngine#preferences

Since:
  • 4.0.0


initializeChart( [container])

INJECTABLE

This method initializes the chart container events, such as window resize events, and the resizeTimer to ensure the chart adjusts as its container size changes. It also initializes various internal variables, the canvas and creates the chart panel.

This is called by CIQ.ChartEngine#loadChart and should rarely be called directly.

Note that the candle width will be reset to 8px if larger than 50px. Even if the value comes from a layout import. This is done to ensure a reasonable candle size is available across devices that may have different screen size.

Parameters:
Name Type Argument Description
container HTMLElement <optional>

Node that contains the chart.


isHome()

Whether the chart is scrolled to a home position.

Since:
  • 2016-06-21

Returns:

true when the scroll position shows the last tick of the dataSet

Type
boolean

isPanelAboveChart(panel)

Determines whether a panel precedes the main chart in the display order.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel for which the display order is determined.

Since:
  • 8.0.0

Returns:

true, if the panel is above the chart; false, if below or not available.

Type
boolean

leftTick()

Returns the tick position of the leftmost position on the chart.

Returns:

The tick for the leftmost position

Type
number

loadBlankChart()

Loads a blank chart

Since:
  • 7.3.0


loadChart(symbol [, parameters] [, callback])

Loads a chart for a particular instrument from the data passed in, or fetches new data from the quotefeed; if one attached.

Replaces CIQ.ChartEngine#newChart.

Note that before using this method, you must first instantiate the chart engine (once only) and assign it to a DOM container using new CIQ.ChartEngine({container: document.querySelector(".chartContainer")});
Once a chart engine is instantiated, this is the only method that should be called every time a new chart needs to be drawn for a different instrument.
There is no need to destroy the chart, recreate the engine, or explicitly change the data using any other methods.

Charts default to 1 day periodicity unless a different periodicity is set in this call or by using CIQ.ChartEngine#setPeriodicity prior to this call. You data must always match the chart periodicity!!

Parameters:
Name Type Argument Description
symbol string | object

A symbol string, equation or object representing the primary instrument for the chart. This is a mandatory field and must contain at least one character for the chart to display data, even is not using a primary instrument.
After the chart is initialized with the new data, it will contain both a symbol string (stxx.chart.symbol) and a symbol object (stxx.chart.symbolObject).
You can send anything you want in the symbol object, but you must always include at least a 'symbol' element.
Both these variables will be available for use wherever the CIQ.ChartEngine.Chart object is present. For example, if using a quotefeed for gathering data, params.stx.chart.symbolObject will contain your symbol object.
To allow equations to be used on a chart, the CIQ.ChartEngine#allowEquations parameter must be set to true and the equation needs to be preceded by an equals sign (=) in order for it to be parsed as an equation.
See CIQ.formatEquation and CIQ.computeEquationChart for more details on allowed equations syntax.

parameters object | array <optional>

Data & configuration settings to initialize the chart.
The masterData array may be provided as the second argument assuming no other parameters need to be specified.

Properties
Name Type Argument Description
masterData array <optional>

An array of properly formatted objects to create a chart.
Each element should at a minimum contain a "Close" or "Value" field (capitalized) and a 'Date' or 'DT' field.
If the charting engine has been configured to use a QuoteFeed then masterData does not need to be passed in, and the quote feed will be used instead.

chart CIQ.ChartEngine.Chart <optional>

Which chart to load. Defaults to this.chart.

range CIQ.ChartEngine~RangeParameters <optional>

Default range to be used upon initial rendering. If both range and span parameters are passed in, range takes precedence. If periodicity is not set, the range will be displayed at the most optimal periodicity. See CIQ.ChartEngine#setRange for complete list of parameters this object will accept.

span CIQ.ChartEngine~SpanParameters <optional>

Default span to display upon initial rendering. If both range and span parameters are passed in, range takes precedence. If periodicity is not set, the span will be displayed at the most optimal periodicity. See CIQ.ChartEngine#setSpan for complete list of parameters this object will accept.

periodicity CIQ.ChartEngine~PeriodicityParameters <optional>

Periodicity to be used upon initial rendering. See CIQ.ChartEngine#setPeriodicity for complete list of parameters this object will accept. If no periodicity has been set, it will default to 1 day.

stretchToFillScreen boolean <optional>

Increase the candleWidth to fill the left-side gap created by a small dataSet. Respects CIQ.ChartEngine.preferences.whitespace. Ignored when params span or range are used. See CIQ.ChartEngine#fillScreen

callback function <optional>

Called when loadChart is complete. See Adding additional content on chart for a tutorial on how to use this callback function.

Since:
Examples

Using a symbol string

stxx.loadChart("IBM");

Using a symbol object and embedded span and periodicity requirements

stxx.loadChart(
	{ symbol: newSymbol, other: "stuff" },
	{
		span: {
			base: "day",
			multiplier: 2,
		},
		periodicity: {
			period: 1,
			interval: 5,
			timeUnit: "minute",
		},
		stretchToFillScreen: true,
	}
);

Using an equation string

stxx.loadChart("=2*IBM-GM");

Provide data as the second argument

stxx.loadChart("YUM", [
	{ Date: "2018-12-03", Close: 2.0034 },
	{ Date: "2018-12-04", Close: 2.0067 },
	{ Date: "2018-12-05", Close: 2.0112 },
	{ Date: "2018-12-06", Close: 2.0091 },
	{ Date: "2018-12-07", Close: 1.9979 },
]);

Provide data as a parameter

stxx.loadChart("BGS", {
	masterData: [
		{ DT: 1542384420000, Close: 1.0 },
		{ DT: 1542384480000, Close: 1.01 },
		{ DT: 1542384540000, Close: 1.04 },
		{ DT: 1542384600000, Close: 1.02 },
	],
	span: {
		base: "minute",
		multiplier: 1,
	},
});

makeAsyncCallbacks()

Makes the async callbacks only if no pending async activity


modalBegin()

Sets the chart into a modal mode. Crosshairs are hidden and the chart will not respond to click or mouse events. Call this for instance if you are enabling a dialog box and don't want errant mouse activity to affect the chart.


modalEnd()

Ends modal mode. See CIQ.ChartEngine#modalBegin


modifyPanel(panel [, params])

Changes the name, display and primary yAxis of a panel, and adjusts all references accordingly.

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel | string

The panel

params object <optional>
Properties
Name Type Argument Description
name string <optional>

Panel name, if omitted, name becomes a random string

display string <optional>

Panel display, defaults to the name

yAxis CIQ.ChartEngine.YAxis <optional>

Panel's y-axis. If omitted, will use the panel's existing y-axis

Since:
  • 7.1.0


modifySeries(descriptor [, parameters] [, noRecurseDependents])

INJECTABLE

Modifies an existing series. Any passed parameters extend the existing parameters.

Parameters:
Name Type Argument Description
descriptor string | Object

Series to modify. Accepts the series object as returned by CIQ.ChartEngine#addSeries or series ID.

parameters Object <optional>

The parameters to change or add.

noRecurseDependents boolean <optional>

If true, the panel and y-axis changes of the modified series do not propagate to the renderers of dependent series.

Since:
  • 5.1.1
  • 5.2.0 No longer accepts a callback function.
  • 7.1.0 Returns the modified series.
  • 7.3.0 Synchronizes panel and y-axis changes with dependent renderers unless the new parameter, noRecurseDependents, is set to true.
  • 8.1.0 Supports custom baselines. See example.
Returns:

The modified series object.

Type
Object
Examples

Remove a series for a particular symbol.

function replaceComparisonColor(stx, symbol, color) {
	for (let series in stx.chart.series) {
		let seriesParams = stx.chart.series[series].parameters;
		if (seriesParams.isComparison && seriesParams.symbol == symbol) {
			stx.modifySeries(series, { color: color });
		}
	}
	stx.draw();
}

Set a custom baseline on an existing series.

stxx.modifySeries("GOOG", { baseline: { defaultLevel: 100 } });

mostRecentClose(field)

Returns the last valid Close found in the dataSet. This would be any numeric value

Parameters:
Name Type Description
field string

Optional object to check Close within, such as with a series

Since:
  • 6.1.0

Returns:

The most recent close

Type
number

mousemoveinner(epX, epY)

INJECTABLE

Core logic for handling mouse or touch movements on the chart.

If CIQ.ChartEngine#grabbingScreen is true then drag operations are performed.

This method sets several variables which can be accessed for convenience:

  • CIQ.ChartEngine.crosshairX and CIQ.ChartEngine.crosshairY - The screen location of the crosshair
  • stxx.insideChart - True if the cursor is inside the canvas
  • stxx.cx and stxx.cy - The location on the canvas of the crosshair
  • stxx.crosshairTick - The current location in the dataSet of the crosshair
  • stxx.currentPanel - The current panel in which the crosshair is located (this.currentPanel.chart is the chart)
  • stxx.grabStartX and this.grabStartY - If grabbing the chart, then the starting points of that grab
  • stxx.grabStartScrollX and this.grabStartScrollY - If grabbing the chart, then the starting scroll positions of the grab
  • stxx.zoom - The vertical zoom percentage
  • stxx.scroll - The scroll position of the chart

*Above assumes your have declared a chart engine and assigned to var stxx.

Parameters:
Name Type Description
epX number

The X location of the cursor on the screen (relative to the viewport)

epY number

The Y location of the cursor on the screen (relative to the viewport)


moveMarkers(fromPanelName, toPanelName)

Moves the markers from one panel to another Useful when renaming panels

Parameters:
Name Type Description
fromPanelName string

The panel to move markers from

toPanelName string

The panel to move markers to

Since:
  • 2016-07-16


needDifferentData(newPeriodicity)

Returns true if the chart needs new data to conform with the new periodicity.

Parameters:
Name Type Description
newPeriodicity object

newPeriodicity. See CIQ.ChartEngine#setPeriodicity

Properties
Name Type Description
period number

period as required by CIQ.ChartEngine#setPeriodicity

interval string

interval as required by CIQ.ChartEngine#setPeriodicity

timeUnit string

timeUnit as required by CIQ.ChartEngine#setPeriodicity

Since:
  • 4.0.0

Returns:

True if the cart needs data in a new periodicity

Type
boolean

newChart(symbol [, masterData], chart [, cb] [, params])

Renders a chart for a particular instrument from the data passed in or fetches new data from the attached quotefeed.

This method has been deprecated, use CIQ.ChartEngine#loadChart.
Parameters:
Name Type Argument Description
symbol string | object

The symbol or equation for the new chart - a symbol string, equation or an object representing the symbol can be used.
After the new chart is initialized, it will contain both a symbol string (stxx.chart.symbol) and a symbol object (stxx.chart.symbolObject).
You can send anything you want in the symbol object, but you must always include at least a 'symbol' element. Both these variables will be available for use wherever the CIQ.ChartEngine.Chart object is present. For example, if using a quotefeed for gathering data, params.stx.chart.symbolObject will contain your symbol object.
To allow equations to be used on a chart, the CIQ.ChartEngine#allowEquations parameter must be set to true and the equation needs to be preceded by an equals sign (=) in order for it to be parsed as an equation.
See CIQ.formatEquation and CIQ.computeEquationChart for more details on allowed equations syntax.

masterData array <optional>

An array of properly formatted OHLC objects to create a chart. Each element should at a minimum contain a "Close" field (capitalized). If the charting engine has been configured to use a QuoteFeed then masterData does not need to be passed in. The quote feed will be queried instead.

chart CIQ.ChartEngine.Chart

Which chart to create. Defaults to the default chart.

cb function <optional>

Callback when newChart is loaded. See Adding additional content on chart for a tutorial on how to use this callback function.

params object <optional>

Parameters to dictate initial rendering behavior

Properties
Name Type Argument Description
range Object <optional>

Default range to be used upon initial rendering. If both range and span parameters are passed in, range takes precedence. If periodicity is not set, the range will be displayed at the most optimal periodicity. See CIQ.ChartEngine#setRange for complete list of parameters this object will accept.

span object <optional>

Default span to display upon initial rendering. If both range and span parameters are passed in, range takes precedence. If periodicity is not set, the span will be displayed at the most optimal periodicity. See CIQ.ChartEngine#setSpan for complete list of parameters this object will accept.

periodicity object <optional>

Periodicity to be used upon initial rendering. See CIQ.ChartEngine#setPeriodicity for complete list of parameters this object will accept. If no periodicity has been set it will default to 1 day.

stretchToFillScreen boolean <optional>

Increase the candleWidth to fill the left-side gap created by a small dataSet. Respects CIQ.ChartEngine.preferences.whitespace. Ignored when params span or range are used. See CIQ.ChartEngine#fillScreen

Since:
  • 2015-11-1 newChart is capable of setting periodicity and span via params settings.
  • 04-2016-08 Added params.stretchToFillScreen.
  • 5.1.0 newChart is capable of setting range via params settings.
  • 6.0.0 Statically provided data will be gap-filled if that functionality is enabled.
  • 7.0.0 Deprecated, replaced by CIQ.ChartEngine#loadChart.
Deprecated:
Examples
// using a symbol object and embedded span and periodicity requirements
stxx.newChart({ symbol: newSymbol, other: "stuff" }, null, null, callbackFunction, {
	span: { base: "day", multiplier: 2 },
	periodicity: { period: 1, interval: 5, timeUnit: "minute" },
	stretchToFillScreen: true,
});
// using a symbol string
stxx.newChart("IBM", null, null, callbackFunction);
// using an equation string
stxx.newChart("=2*IBM-GM", null, null, callbackFunction);

notifyBreakpoint( [breakpoint])

Sets the breakpoint on the chart engine. Resets any dynamic y-axis expansion (see CIQ.ChartEngine.Chart#dynamicYAxis) and returns the y-axis width to CIQ.ChartEngine.YAxis#width or CIQ.ChartEngine.YAxis#smallScreenWidth, depending on the breakpoint. Also clears all canvas styles so any CSS-derived values that are cached for performance are recalculated.

Parameters:
Name Type Argument Description
breakpoint string <optional>

The breakpoint to set; must be "break-sm", "break-md", or "break-lg".

Since:
  • 8.2.0


padOutPrice(price [, determinant])

Pads out the decimal places given only a price.

It will not truncate or round, but will add zeroes as follows:

  • Prices under $2 will be padded to 4 decimal places, or to match the number of decimal places in determinant; whichever is larger.
  • Prices over $1,000 will not be padded, or set to match the number of decimal places in determinant, if any.
  • All other prices will be padded to 2 decimal places, or to match the number of decimal places in determinant; whichever is larger.
Parameters:
Name Type Argument Description
price number

A price

determinant number <optional>

Sample value to determine the decimal places. For instance, if you want to determine the number of decimals for today's change based on the actual price.

Since:
  • 2016-07-16

Returns:

A price padded for decimal places

Type
string

panelDown(panel)

This moves a panel down one position (when the user clicks the down arrow).

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel to move down.


panelExists(name)

Returns true if the panel exists

Parameters:
Name Type Description
name string

Name of panel to search for

Returns:

True if the panel exists

Type
boolean

panelSolo(panel)

This "solos" the panel (when the user clicks the solo button). All panels other than this panel and the chart are temporarily hidden. If the solo panel is the chart then all other panels will be hidden. Note if CIQ.ChartEngine#soloPanelToFullScreen is set than even the chart panel may be hidden

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel to be soloed.


panelUp(panel)

This moves a panel up one position (when the user clicks the up arrow).

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel to move up.


pixelFromBar(bar [, chart])

Returns the X pixel given the location of a bar (dataSegment) on the chart.

Parameters:
Name Type Argument Description
bar number

The bar for which the X pixel is returned (position on the chart, which is also the position in the dataSegment).

chart CIQ.ChartEngine.Chart <optional>

The chart that contains the bar. Defaults to this.chart.

Returns:

The X pixel on the chart.

Type
number

pixelFromDate(date, chart [, adj] [, forward])

Returns the X pixel position for a tick of a given date.

The date does not need to match exactly. If the date lies between ticks then the earlier will be returned.

Warning: this can be an expensive operation if the date is not in the dataSet.

Parameters:
Name Type Argument Description
date Date | string

Date object or String form date

chart CIQ.ChartEngine.Chart

The chart to look in

adj number <optional>

Timezone adjustment in minutes to apply to date before getting tick

forward boolean <optional>

Switch to return the next tick as opposed to the previous, in case an exact match is not found

Since:
  • added adj and forward arguments

Returns:

The pixel location for the date

Type
number

pixelFromPrice(price, panel [, yAxis])

Returns the Y pixel from a price, even if a transformation such as a percentage change comparison scale is active.

To do this, the active transformation function will be applied to the provided price and then CIQ.ChartEngine#pixelFromTransformedValue will be called on the resulting value.
If no transformation is present, both this method and CIQ.ChartEngine#pixelFromTransformedValue will return the same value.

Parameters:
Name Type Argument Description
price number

The price or value

panel CIQ.ChartEngine.Panel

A panel object (see CIQ.ChartEngine#pixelFromPrice)

yAxis CIQ.ChartEngine.YAxis <optional>

The yaxis to use

Returns:

The y axis pixel location

Type
number

pixelFromPriceTransform(price, panel [, yAxis])

** This function has been deprecated in favor of CIQ.ChartEngine#pixelFromPrice. It should no longer be used.
Use CIQ.ChartEngine#pixelFromTransformedValue to get the pixel location based on the transformed value (percentage comparison change, for example).

Parameters:
Name Type Argument Description
price number

The price or value

panel CIQ.ChartEngine.Panel

A panel object (see CIQ.ChartEngine#pixelFromPrice)

yAxis CIQ.ChartEngine.YAxis <optional>

The yaxis to use

Since:
  • 4.0.0 Now behaves like pixelFromPriceTransform. That is, on a comparison chart, pixelFromPrice accepts an actual stock price, not a percentage value.

Deprecated:
Returns:

The y axis pixel location

Type
number

pixelFromTick(tick [, chart])

Returns the x-coordinate (in pixels) at the location where a given tick is plotted. The x-coordinate is the center of the tick location.

Note: The pixel x-coordinate can be off the visual canvas, and it can overlap the y-axis.

Parameters:
Name Type Argument Default Description
tick number

A position in the data set array (tick).

chart CIQ.ChartEngine.Chart <optional>
this.chart

The chart object that contains the data set.

Returns:

The x-coordinate in pixels of the plotted tick (can be negative or can be greater than dataSet.length).

Type
number

pixelFromTransformedValue(price [, panel] [, yAxis])

Returns the Y pixel from a transformed/displayed value (percentage comparison change, for example).

To get the location of an untransformed price, use CIQ.ChartEngine#pixelFromPrice.
If no transformation is present, both this method and CIQ.ChartEngine#pixelFromPrice will return the same value.

Parameters:
Name Type Argument Description
price number

The transformed price

panel CIQ.ChartEngine.Panel <optional>

The panel (defaults to the chart)

yAxis CIQ.ChartEngine.YAxis <optional>

The yAxis to use

Since:
  • 4.0.0

Returns:

The Y pixel value

Type
number

pixelFromValueAdjusted(panel, tick, value [, yAxis])

Returns the Y pixel location for the (split) unadjusted price rather than the displayed price. This is important for drawing tools or any other device that requires the actual underlying price.

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel to get the value from

tick number

The tick location (in the dataSet) to check for an adjusted value

value number

The value

yAxis CIQ.ChartEngine.YAxis <optional>

The yaxis to use

Returns:

The pixel location

Type
number

plotDataSegmentAsLine(field, panel [, parameters] [, colorFunction])

Animation Loop

Draws a line plot on the canvas. This function should not be called directly.

This function is used by CIQ.ChartEngine#drawLineChart, CIQ.ChartEngine#drawMountainChart (to draw the "edge" of the mountain), CIQ.prepareChannelFill, CIQ.Studies.displayIndividualSeriesAsLine, and several built-in studies.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Replaces plotLineChart.

Line Travel Example — See the lineTravelSpacing parameter. Term Structure with Line Travel Values

Parameters:
Name Type Argument Description
field string

The field to pull from quotes (typically "Close").

panel CIQ.ChartEngine.Panel

The panel on which to draw the line.

parameters object <optional>

Parameters for the drawing operation.

Properties
Name Type Argument Default Description
skipTransform boolean <optional>

If true, any transformations (such as comparison charting) are not applied.

label boolean <optional>

If true, the y-axis is marked with the value of the right-hand intercept of the line.

noSlopes boolean <optional>

If set, the chart draws horizontal bars with no vertical lines.

step boolean <optional>

If set, the chart will resemble a step chart. Horizontal lines begin at the center of the bar.

labelDecimalPlaces boolean <optional>

Optionally specify the number of decimal places to print on the label. If not set, it matches the y-axis.

extendOffChart boolean <optional>
true

Set to false to not extend the plot off the left and right edge of the chart.

extendToEndOfDataSet boolean <optional>

Set to true to plot any gap at the front of the chart. Automatically done for step charts (see CIQ.ChartEngine#addSeries). Set to false to disable.

noDraw boolean <optional>

Set to true to not actually draw anything but just return the object.

tension number <optional>

Tension for splining.

pattern string <optional>

The pattern for the line ("solid","dashed","dotted").

width number <optional>

The width in pixels for the line.

gapDisplayStyle object <optional>

Gap object as created by CIQ.ChartEngine#setGapLines. If chart.gaplines is set, it overrides this parameter. Set to a transparent style to also eliminate 'dots' indicating isolated items.

reverse boolean <optional>

If true, it fills from the plot line to the top of the panel for a mountain chart to create a reverse mountain.

highlight boolean <optional>

If true, doubles the width of the line.

yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis.

shiftRight number <optional>

Shifts the chart line the specified number of pixels to the right. Used by the term structure plugin.

lineTravelSpacing boolean <optional>

If true, the chart spaces points based on a value known as line travel rather than on candle width. Line travel specifies how far the succeeding point is spaced from the current point. Each data point in the data segment must include a line travel value. For example:

{_main_curve: 2.31, lineTravel: 38.380171166599986}
{_main_curve: 2.37, lineTravel: 38.380171166599986}
{_main_curve: 2.40, lineTravel: 66.47640646374124}
{_main_curve: 2.53, lineTravel: 94.01183559884934}
{_main_curve: 2.69, lineTravel: 132.95281292748248}
{_main_curve: 2.81, lineTravel: 132.95281292748248}
{_main_curve: 2.84, lineTravel: 188.0236711976987}
{_main_curve: 2.87, lineTravel: 188.0236711976987}
{_main_curve: 2.97, lineTravel: 230.2810269995999}
{_main_curve: 3.06, lineTravel: 420.43371017712354}
{_main_curve: 3.23, lineTravel: 420.43371017712354}
{_main_curve: 3.34, lineTravel: 0}

Used by the term structure plug-in to enable non-uniform spacing of plotted points. See the example in the function description.

alignStepToSide boolean <optional>

If set along with parameters.step, aligns the step to the sides of the bar rather than the center.

extendToEndOfLastBar boolean <optional>

If set along with parameters.step, extends the line to the end of the last bar.

colorFunction function <optional>

A function that accepts a CIQ.ChartEngine, quote, and gap flag (true if the quote is a gap) as its arguments and returns the appropriate color for drawing that mode.
Example: colorFunction(stxx,untransformedQuote,true); //true says this is a gap.
Returning a null will skip that line segment. If not passed as an argument, will use the color set in the calling function.

Since:
  • 4.0.0 Replaces plotLineChart.
  • 5.2.0 parameters.gaps has been deprecated and replaced with parameters.gapDisplayStyle.
  • 6.0.0 params.gapDisplayStyle can be set to false to suppress all gap drawing.
  • 7.3.0 Added parameters.shiftRight and parameters.lineTravelSpacing.
  • 8.0.0 Added parameters.alignStepToSide and parameters.extendToEndOfLastBar.
Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object

plotLine(parameters)

Convenience function for plotting a straight line on the chart.

Parameters:
Name Type Description
parameters object

Provide a description of the line.

Properties
Name Type Argument Description
x0 number

Starting x-coordinate of the line.

x1 number

Ending x-coordinate of the line.

y0 number

Starting y-coordinate of the line.

y1 number

Ending y-coordinate of the line.

color string

Either a color or a Styles object as returned from CIQ.ChartEngine#canvasStyle.

type string

The type of line to draw ("segment","ray", or "line"); defaults to "segment".

context external:CanvasRenderingContext2D <optional>

The canvas context. Defaults to the standard context.

confineToPanel CIQ.ChartEngine.Panel | boolean <optional>

The panel in which to confine the drawing; unnecessary if clipping. To confine the drawing to the primary chart panel, set to true.

pattern string <optional>

The pattern for the line ("solid","dashed","dotted")

lineWidth number <optional>

The width in pixels for the line.

opacity number <optional>

Optional opacity for the line.

globalCompositeOperation string <optional>

Sets the type of compositing to apply to new drawings. For example, "source-over" draws new shapes over, or on top of, existing content. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation for a complete list of compositing types.

deferStroke boolean <optional>

True to treat this line as a continuation of a previous path. Will not stroke.

Since:
  • 7.4.0 Added the globalCompositeOperation parameter. Normalized all arguments under parameters.


plotsInPanel(panel)

Returns an array of plots (studies and renderers) situated within a given panel, not including the main series of the chart panel.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel | string

The panel to check

Since:
  • 7.1.0

Returns:

Plots which are in the panel

Type
array

plotSpline(points, tension, color, type [, context] [, confineToPanel] [, parameters])

Draws a series of points and splines (smooths the curve) those points.

This is uses for drawings, not series.

Parameters:
Name Type Argument Description
points array

A series of points in the pattern x0,y0,x1,y1

tension number

Spline tension (0-1). Set to negative to not spline.

color string

Either a color or a Styles object as returned from CIQ.ChartEngine#canvasStyle

type string

The type of line to draw ("segment","ray" or "line")

context external:CanvasRenderingContext2D <optional>

The canvas context. Defaults to the standard context.

confineToPanel string <optional>

Not currently implemented

parameters object <optional>

Additional parameters to describe the line

Properties
Name Type Argument Description
pattern string <optional>

The pattern for the line ("solid","dashed","dotted")

width number <optional>

The width in pixels for the line

opacity number <optional>

Opacity for the line


positionBaselineHandle(renderer)

Positions a baseline handle within the chart area.

Parameters:
Name Type Description
renderer CIQ.Renderer

The renderer that renders the baseline.

Since:
  • 8.2.0


positionSticky(m)

Positions a "sticky" (a tooltip element). It is positioned relative to the cursor but so that it is always available and never accidentally tappable on a touch device.

Parameters:
Name Type Description
m HTMLElement

The sticky


postAdjustScroll()

Call this after a resizing operation in order to maintain the scroll position. See CIQ.ChartEngine#preAdjustScroll.


preAdjustScroll( [chart])

Call this before a resizing operation in order to maintain the scroll position. See CIQ.ChartEngine#postAdjustScroll.

Parameters:
Name Type Argument Description
chart CIQ.ChartEngine.Chart <optional>

The chart to adjust. Otherwise adjusts the main symbol chart.


prepend(o, n)

Prepends custom developer functionality to an internal chart member. See “Injection API".

Parameters:
Name Type Description
o string

Signature of member

n function

Callback function, will be called with "apply"

Since:
  • 04-2015 You can append either to an CIQ.ChartEngine instance, or to the prototype. The first will affect only a single chart while the latter will affect any chart (if you have multiple on the screen).
  • 15-07-01 Function returns a descriptor which can be passed in to removeInjection() to remove it later on.
Returns:

Injection descriptor which can be passed in to CIQ.ChartEngine#removeInjection to remove it later on.

Type
object

priceFromPixel(y [, panel] [, yAxis])

Returns the actual value of the chart given a pixel regardless of any transformation such as a comparison chart.

Parameters:
Name Type Argument Description
y number

The Y pixel location

panel CIQ.ChartEngine.Panel <optional>

The panel to look. Defaults to the chart itself if not passed in.

yAxis CIQ.ChartEngine.YAxis <optional>

The yAxis to use. Defaults to panel.yAxis.

Returns:

The Y location. This may be off of the visible canvas.

Type
number

rawWatermark(context, x, y, text)

Creates watermarked text on the canvas.

See CIQ.ChartEngine#watermark to create a watermark relative to a particular panel.

CSS style stx_watermark defines the watermark (opacity of .5 is automatically applied)

Note that the watermark will not persist unless called from within the animation loop (study display function, for example). As such, it may be necessary to use a prepend to the draw function to create persistence. See example section.

Parameters:
Name Type Description
context external:CanvasRenderingContext2D

[description]

x number

X position on canvas

y number

Y position on canvas

text string

The text to watermark

Example
CIQ.ChartEngine.prototype.prepend("draw", function () {
	// create persistence by forcing it  be called in every animation frame.
	rawWatermark(stxx.chart.context, 20, 30, stxx.chart.symbol);
});

reconstructDrawings(arr)

Imports drawings from an array originally created by CIQ.ChartEngine#serializeDrawings.

Note: This function and serializeDrawings have been renamed CIQ.ChartEngine#importDrawings and CIQ.ChartEngine#exportDrawings respectively.

To immediately render the reconstructed drawings, you must call draw(). See Using and Customizing Drawing Tools for more details.

Parameters:
Name Type Description
arr array

An array of serialized drawings

Deprecated:
  • since 4.0.0

See:

registerBaselineToHelper(renderer)

Adds an entry to CIQ.ChartEngine#baselineHelper with renderer as the key and a dynamically created object as the value. The value object contains data related to the baseline.

If the renderer is the renderer of the main series, sets the handle property of the value object to CIQ.ChartEngine.htmlControls[`baselineHandle`]; otherwise, creates a baseline handle DOM element and adds a reference to the DOM element to the value object and to the chart controls object, CIQ.ChartEngine.htmlControls. The handle is accessed in the chart controls object by a property name that is the concatenation of the renderer name and "cq-baseline-handle", for example:

stxx.controls[`${renderer.params.name} cq-baseline-handle`];
Parameters:
Name Type Description
renderer CIQ.Renderer

The renderer to register as the key of the baseline helper.

Since:
  • 8.2.0


registerChartControl(controlClass, controlLabel, clickHandler)

Appends additional chart controls and attaches a click event handler.

Parameters:
Name Type Description
controlClass string

CSS class to attach to the control element.

controlLabel string

Descriptive name for the control; appears in tooltip.

clickHandler function

Called when the control is selected.

Since:
  • 7.3.0

Returns:

Reference to the new control element.

Type
node

registerChartDrawnCallback(fc)

Registers a callback for when the chart has been drawn

Parameters:
Name Type Description
fc function

The function to call

Returns:

An object that can be passed in to CIQ.ChartEngine#unregisterChartDrawnCallback

Type
object

registerTouchAndMouseEvents()

Registers touch and mouse events for the chart (for dragging, clicking, zooming). The events are registered on the container div (not the canvas). Set CIQ.ChartEngine#manageTouchAndMouse to false to disable the built in event handling (events will not be registered with the container).


remove(o)

Removes any and all prepend and append injections from a specified CIQ.ChartEngine function. If called as an instance method, will remove the instance injections. If called as a prototype method, will remove the prototype injections.

Parameters:
Name Type Description
o string

Signature of function which has injections to remove

Example
stxx.remove("displayChart"); // removes instance injections
CIQ.ChartEngine.prototpye.remove("displayChart"); // removes prototype injections

removeBaselineFromHelper(renderer)

Removes a renderer from CIQ.ChartEngine#baselineHelper.

If the renderer is not the renderer of the main series, removes the baseline handle associated with the renderer from the chart controls object, CIQ.ChartEngine.htmlControls (see also CIQ.ChartEngine#registerBaselineToHelper).

Parameters:
Name Type Description
renderer CIQ.Renderer

The renderer to remove from the baseline helper.

Since:
  • 8.2.0


removeDrawing(drawing)

Removes the drawing. Drawing object should be one returned from CIQ.ChartEngine#createDrawing. See Using and Customizing Drawing Tools for more details.

Parameters:
Name Type Description
drawing object

Drawing object


removeEventListener(obj [, cb])

Removes a listener for a chart event type.

If the event type is "*", listeners for all event types are removed. See CIQ.ChartEngine#addEventListener for valid event types.

Events are tracked in the CIQ.ChartEngine.callbackListeners object.

Parameters:
Name Type Argument Description
obj object | string

The object returned from adding the listener (see CIQ.ChartEngine#addEventListener) or a string that identifies the type of event.

Note: If this parameter is a string, the optional cb parameter is required.

Properties
Name Type Description
type string

The type of event.

cb function

The listener to be removed.

cb function <optional>

The listener to be removed. Required if the obj parameter is an string, unused otherwise.

Since:
  • 04-2016-08


removeInjection(id)

Removes a specific injection. One can remove either an instance injection or a prototype injection, depending on how the function is called.

Parameters:
Name Type Description
id object

The injection descriptor returned from CIQ.ChartEngine#prepend or CIQ.ChartEngine#append

Since:
  • 07/01/2015


removeNotification(name)

Removes a notification from the CIQ.ChartEngine.htmlControls.notificationTray.

Parameters:
Name Type Description
name string

The name of the notification that is removed.

Since:
  • 8.0.0


removeSeries(field [, chart])

INJECTABLE

Detaches a series added using addSeries from all associated renderers in the chart, removing the actual series data from masterData.

If the series belonged to a renderer that no longer has other series attached to it, the renderer is removed as well. See CIQ.Renderer#removeSeries for more details or how to remove a series from a single renderer and without ever deleting the associated renderer or data.

To remove all series from a chart, simply iterate through the active series object and delete them one at a time:

for(var s in stxx.chart.series){
   var series=stxx.chart.series[s];
   stxx.removeSeries(series);
}
Parameters:
Name Type Argument Description
field string | object

The name of the series to remove -OR- the series object itself.

chart CIQ.ChartEngine.Chart <optional>

The chart object from which to remove the series

Since:
  • 4.0.0 Now supports passing a series descriptor instead of a field.
  • 4.0.0 Series data is now totally removed from masterData if no longer used by any other renderers.
  • 4.0.0 Empty renderers are now removed when series are removed.

removeSeriesRenderer(renderer)

Detaches a series renderer from the chart and deletes its associated y-axis if no longer used by any other renderer.

Note: the actual series and related data are not deleted with this command and can be attached or continue to be used with other renderers.

Note: the actual renderer (created by using new CIQ.Renderer.xxxxx) is not deleted but simply detached from the chart. You can re-attach it again if needed. To delete the renderer use delete myRenderer. See example in CIQ.Renderer.Lines

Parameters:
Name Type Description
renderer object

The actual renderer instance to be removed

Since:
  • 07/01/2015


resizeCanvas()

This method resizes the canvas to the dimensions of the containing div. This is called primarily by CIQ.ChartEngine#resizeChart and also when the chart is initialized (via loadChart).


resizeChart( [maintainScroll])

INJECTABLE

Resizes the chart and adjusts the panels. The chart is resized to the size of the container div by calling CIQ.ChartEngine#resizeCanvas. This method is called automatically if a screen resize event occurs. The charting engine also attempts to detect size changes whenever the mouse is moved. Ideally, if you know the chart is being resized, perhaps because of a dynamic change to the layout of your screen, you should call this method manually.

Parameters:
Name Type Argument Default Description
maintainScroll boolean <optional>
true

By default the scroll position will remain pegged on the right side of the chart. Set this to false to override.

Since:
  • 2015-11-1 resizeChart now automatically retains scroll position.
  • 09-2016-19 resizeChart now also manages the resizing of the crosshairs.

resolveX(x)

Returns the absolute screen position given a X pixel on the canvas

Parameters:
Name Type Description
x number

X pixel on the canvas

Returns:

Absolute X screen position

Type
number

resolveY(y)

Returns the absolute screen position given a Y pixel on the canvas

Parameters:
Name Type Description
y number

Y pixel on the canvas

Returns:

Absolute Y screen position

Type
number

savePanels(saveLayout)

Saves the panel state in the layout. Called whenever there is a change to panel layout (resizing, opening, closing).

Parameters:
Name Type Description
saveLayout boolean

If false then a change event will not be called. See (@link CIQ.ChartEngine#changeOccurred)


scatter(panel, params)

Animation Loop

Draws a scatter plot on the chart.

Use CSS style stx_scatter_chart to control the scatter chart display as follows: - color - Optional color

This method should rarely if ever be called directly. Use CIQ.Renderer.Scatter or CIQ.ChartEngine#setChartType instead.

Any parameters from CIQ.Renderer#attachSeries or CIQ.ChartEngine#addSeries will be passed on to this method and are valid when directly calling it from within a study display function of a Custom Study.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel on which to draw

params object

Additional parameters controlling the rendering

Properties
Name Type Argument Default Description
yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

field string <optional>

Set to override the field to be plotted. Default is chart.defaultPlotField which defaults to "Close"

color string <optional>

Set to override the color of the plot.

highlight boolean <optional>

Set to true to indicate plot is highlighted.

lineWidth string <optional>
4

Line thickness in pixels

Since:
  • 5.1.0 Added params and return value.
  • 6.2.0 Added lineWidth parameter.
Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object
Example
// call it from the chart menu provided in the sample templates
<li stxToggle="stxx.setChartType('scatterplot')">Scatter Plot</li>

scrollTo(chart, position [, cb])

Scrolls the chart to a particular position in the dataSet by setting its appropriate scroll value.

Note that positions are tracked from right to left.

  • Setting to 1 would only display the very last candle on the chart.
  • Setting to 10 would display the last 10 candles on the chart.
  • Setting to stxx.chart.maxTicks-1 would display the last screenful of data.
  • Setting to stxx.chart.dataSet.length would display the first few candles (oldest) on the chart.

Example

Parameters:
Name Type Argument Description
chart CIQ.ChartEngine.Chart

Chart object to target

position number

the scroll position to move to.

cb function <optional>

Callback executed after scroll location is changed.


serializeDrawings()

Exports all of the drawings on the chart(s) so that they can be saved to an external database and later reconstructed.

Note: This function has been renamed CIQ.ChartEngine#exportDrawings.

Deprecated:
  • since 3.0.0

See:
Returns:

An array of objects representing each drawing

Type
array

setAdjusted(data)

Sets the charts to adjusted values rather than standard values. Adjusted values are calculated outside of the chart engine (and may be splits, dividends or both). When charts are using adjusted values, a computed ratio for each tick is used for price to pixel calculations which keeps drawings accurate

Parameters:
Name Type Description
data boolean

True to use adjusted values (Adj_Close), false to use Close values


setAggregationType(aggregationType)

Sets the base aggregation type for the primary symbol.

See Chart Styles and Types for more details. See the Overriding Defaults Section for details on how to override aggregation type defaults.

Parameters:
Name Type Description
aggregationType string

The chart type


setBaselines(chart)

Sets baseline.actualLevel for any line renderers that are attached to the chart. (See the baseline parameter of CIQ.Renderer.Lines, which may be type CIQ.ChartEngine.Chart#baseline.)

Note: Does not set CIQ.ChartEngine.Chart#baseline[`actualLevel`]; that is done in