How do I make the chart non-interactive?

stxx.manageTouchAndMouse = false;


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

Create a chart with no data for a main symbol:

stxx.newChart("Equal Citizens", []);

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 add multiple Y-axes?

Create a new axis:

var axis=new CIQ.ChartEngine.YAxis();

// Optionally configure the yaxis
axis.textStyle="#0044FF";                // axis text color
axis.maxDecimalPlaces=0;                   // no decimal places on the last price pointer

// If you want to give the y-axis a different default top and bottom margin from the main chart
axis.initialMarginTop=50;                // set the top margin
axis.initialMarginBottom=50;            // set bottom margin
stxx.calculateYAxisMargins(axis);        // have to call this to set the zoom level of the axis

Create a renderer:

var renderer=stxx.setSeriesRenderer(
    new STX.Renderer.Lines(
            params:{name:"lines", type:"mountain", yAxis:axis}

Add the series:

stxx.addSeries("GOOG", {display:"GOOG",data:{useDefaultQuoteFeed:true},width:2});

Render the series:

renderer.removeAllSeries().attachSeries("GOOG", "#FFBE00").ready();

Baseline Chart

How do I add a fixed baseline to a chart?

stxx.chart.baseline.defaultLevel = myBaselineLevel

How do I make the baseline not user editable?

stxx.chart.baseline.userLevel = false


How do I hide the zoom buttons? = "none";

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?

function replaceComparisonColor(stx, symbol, color){
  var seriesParams=stx.chart.seriesRenderers._generic_series.seriesParams;
  for(var i=0;i<seriesParams.length;i++){
    var params=seriesParams[i];


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.

CIQ.ChartEngine.prototype.prepend("resizeChart", function () {
    if (this.maintainSpan && this.chart.xaxis && this.chart.xaxis.length) { = this.layout.candleWidth;
        this.ow = this.chart.width;
        this.s = this.chart.scroll;

CIQ.ChartEngine.prototype.append("resizeChart", function () {
    if (this.maintainSpan && this.ow) {
        var ot = this.ow /;
        this.layout.candleWidth = this.chart.width / ot;
        this.chart.scroll = this.s;

Now to maintain the span of the chart just set maintainSpan to true:

stxx.maintainSpan = true

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

This example assumes the use of jQuery

CIQ.ChartEngine.prototype.prepend("resizeChart", function () {
    var jContainer = $('#' +;
    if (this.heightWidthRatio) {
        jContainer.height(jContainer.width() * this.heightWidthRatio);

To use just set the heightWidthRatio:

stxx.heightWidthRatio = 9/16;


How Do I turn off borders on the volume study

"vchart": {
  "display": "Volume",
  "range": "bypass",
  "seriesFN": null,
  "calculateFN": CIQ.Studies.calculateVolume,
  "inputs": {},
  "outputs": {"Up Volume":"#8cc176","Down Volume":"#b82c0c"},
  "parameters": {
      "zoom": 0,
      "displayBorder": true

How Do I turn off borders on the volume study?

.stx_volume_underlay_up {
    border-left-color: transparent;
.stx_volume_underlay_down {
    border-left-color: transparent;