My library stopped working. The charts don't display any more

All libraries are time locked to match your contract renewal date. If your library stopped working, and you have not made any changes, it probably expired. You can check the expiration date by opening the js/chartiq.js file and reviewing the first few lines.

Sample header:

Generation date: yyyy-dd-mmThh:mm:ss.mmmZ
Expiration date: yyy-mm-dd
Domain lock:;localhost;*.sample.com;*.sample2.com
License type: annual
Full Bundle

Additionally, the license may also be domain locked. As such it will only work if running from the registered domains as listed on the chartiq.js file.

How do I create a full screen chart?

A chart will always fill up the container (\<div>) that you've provided. The container can have a relative width style, such as width=100%. The same is not true for height because HTML does not include the concept of 100% height for page size. The thing to realize is that a "window" has a fixed height, but an HTML page is variable height.

To create a full screen chart you must use JavaScript to measure the window height and then set the container to a fixed height in pixels. You will then need to catch window.resize events if you want your chart to expand and contract when the user resizes their window. You'll need a working knowledge of CSS to do this right! ​

Example: Full size window chart using JQuery:

<div class="chartContainer" style="width:100%;position:absolute;top:0;left:0;"></div>
    var container=$(".chartContainer");

    // Function to resize container to window size
    function maximizeChart(){
    var height=$(window).height();
    container.css({"height": height+"px"});
    stxx.resizeChart(); // for instantaneous resize. Chart checks automatically every 50ms.

    // Resize the container once, when page is initialized

    // Resize the container whenever the screen size is changed

If nested inside of other divs, your container can automatically expand to the full width and height of its parent with this CSS:


Programmers don't use CSS! How do I set chart styles using an object?

var stxx=new CIQ.ChartEngine({container:..., styles:{"stx_xaxis":{"color":"red"}}});

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

CIQ.ChartEngine#newChart can accept either a symbol (string) or a symbolObject (object). If you pass an object to newChart(), 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={
    "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#newChart becomes an asynchronous function. You cannot place code after newChart, you must use newChart's callback to run code.

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

stxx.newChart("IBM", null, null, 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 :


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 :


I am getting a strange webpack warning for a 'Critical dependency'

WARNING in ../chartiq/dist/lib/chartiq.js
23:11942-12025 Critical dependency: the request of a dependency is an expression

You can safely ignore this. Our chart sharing code relies on html2canvas. This is a heavy library and so if it's not already defined, the code will attempt to dynamically load it. The obfuscation is turning this into an expression.

For example:

require([(c9+w7+I+r8+A9+X)] vs. require(["html2canvas"]

Typescript can't compile because it can't find 'chartiq'

If Typescript is not able to figure out where you have put the library it may have trouble compiling. Make sure that you have told your tsconfig file where to look for the charting library by setting up the path to the library. Below is an example of what your tsconfig.json should look like:

    "baseUrl": ".",
    "paths": {
    "chartiq": ["src/chartiq_library/js/chartiq"]

For me help refer to the official Typescript documentation on resolving modules.