Getting started
Chart interface
Web components
Chart internals
Data integration
Frameworks and bundlers
Mobile development
Time Span Events
Term structures

Knowledge Base


How do I make the chart non-interactive?

See the Creating Static Charts tutorial.

How do I add series to chart with no main symbol?

Create a chart with no data for a main symbol:


Then add series with the forceData option set to true:

stxx.addSeries(key, {
	data: arrayContainingData,
	shareYAxis: true,
	color: "aquamarine",
	forceData: true,
	permanent: true



How do I hide the zoom buttons?

stxx.controls.chartControls.style.display = "none";
stxx.controls.chartControls = null;

Also see CIQ.ChartEngine#htmlControls, CIQ.ChartEngine#allowZoom and CIQ.ChartEngine#allowScroll for more details.

How do I hide the chart title?

	.stx-panel-title {
		display: none;

How do I overlay the y-axis on the chart?

stxx.yaxisLeft = 0;
stxx.chart.yAxis.justifyRight = true;

How do I change the color of an existing comparison symbol added by the default UI?

The default UI adds comparisons using the selectItem function of the comparison web component. This web component creates it's own renderer called '_generic_series' to group all comparison series. To modify any parameters of an existing comparison series added by this web component, you must directly access the renderer, and change it's parameters, or subsequently iterate trough all series attached to the renderer and modify those.

This outlines how you would change the color of a particular series within this comparison group.

function replaceComparisonColor(stx, symbol, color) {
	for (var series in stx.chart.series) {
		var seriesParams = stx.chart.series[series].parameters;
		if (seriesParams.isComparison && seriesParams.symbol == symbol) {
			stx.modifySeries(series, { color: color });

For more on series see CIQ.ChartEngine#addSeries CIQ.ChartEngine#modifySeries


How do I get the chart to maintain span upon resizing?

The normal behavior of the chart upon resizing is to maintain the candlewidth, this causes the chart to scroll upon resizing.

To maintain the span, while resizing you need to adjust the candlewidth and scroll to the same position after resize. Use this injection to achieve the behavior.

How do I get the chart to maintain height-width ratio upon resizing?

Use this injection to achieve the behavior.


How Do I turn off borders on the volume study?

See 'Volume Underlay or Overlay' section of the CSS Overview tutorial.

Programmers don't use CSS! How do I set chart styles inside the JS code?

Just use CIQ.ChartEngine#setStyle after the engine has been instantiated.


​var stxx = new CIQ.ChartEngine({container: document.querySelector(".chartContainer")});
stxx.setStyle("stx_xaxis", "color", "red");
stxx.setStyle("stx_xaxis_dark", "color", "red");

I don't have stock symbols / I need more than one variable to define a security

CIQ.ChartEngine#loadChart can accept either a symbol (string) or a symbolObject (object). If you pass an object to loadChart(), then that object will be sent to your quotefeed.

Example: Creating a chart with a symbolObject:

// A symbolObject can contain anything that you need to send to your data server.
var symbolObject = {
	securityType: "EQUITY",
	cusip: "GFG32323",
	id: 6545454,
	symbol: "Bob's Index"

// The symbolObject is available in the "params" argument to your ..fetch functions
yourquotefeed.fetchInitialData = function(symbol, start, end, params) {
	console.log(params.symbolObject.cusip); /// prints "GFG32323"

//... attach quote feed

// Initialize a chart with your symbolObject, this will call fetchInitialData

The chart library will use the value of symbolObject.symbol to create a label on the chart. In fact, internally the charting library will automatically create a symbolObject if you didn't provide one!

How do I run code after a chart is done loading?

When you use a quotefeed, CIQ.ChartEngine#loadChart becomes an asynchronous function. You cannot place code after loadChart, you must use loadChart's callback to run code.

Example: Run some code after a chart has been loaded:

stxx.loadChart("IBM", function(err) {
	if (err) alert("Error loading chart! " + err);
	else alert("Chart loaded correctly");

What are the options for dealing with data gaps?

Sometimes lightly traded instruments will not trade during every chart interval. When this happens we say that the chart has a "gap". The chart's default behavior is to skip gaps; the chart's x-axis will compress as a result.

Optionally, a chart can fill the gaps. It does so by "carrying" the Close value from the previous bar forward. The Close continues to carry forward until data begins again. The flag cleanupGaps is used to set this behavior.

Example, set chart to fill gaps :

stxx.cleanupGaps = "carry";

A third option is to display an actual gap on the screen whenever data is missing. A line chart will have a broken section while candle charts will skip the gapped candle. Setting a bar's Close value to null will force a physical gap to appear on the chart. You can also force the chart to create physical gaps with the cleanupGaps flag.

Example, set chart to display gaps :

stxx.cleanupGaps = "gap";

Next steps