Edit in JSFiddle

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);

import sampleData from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_DAILY.js";

const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
}); /// Declare a CIQ.ChartEngine object. This is the main object for drawing charts.

//have main chart give space for the legend
stxx.chart.yAxis.initialMarginTop = 50;

//position legend
stxx.chart.legend = {
  x: 300,
  y: 20
};

stxx.loadChart("SPY", sampleData, function() {

  // add the series (as many as you need)

  // this one has data matching the range of the primary symbol 
  // and we are also appending new ticks to keep it in sync
  stxx.addSeries("Series-Name", {
    color: "green",
    data: getDataFromServer("someFieldIwantToAdd"),
    marginTop: 100, // give room for the legend
  });

  // this one only has partial data so it will only render a segment
  stxx.addSeries("GE", {
    color: "red",
    data: getDataFromServer("GE"),
    marginTop: 100, // give room for the legend
  });

  // this one only has partial data so it will only render a segment
  stxx.addSeries("IBM", {
    color: "blue",
    data: getDataFromServer("IBM"),
    marginTop: 100, // give room for the legend
  });
});

/*****************************************************************/
/* the following is only needed if you are not using a quotefeed */
/*****************************************************************/


// After a series is added , be sure to include the new ticks 
// in your masterData as you stream new data if you inted to keep the series in sync with your primary symbol.
// This is just dummy code for streaming quotes (randomly generated to update the last tick)
setInterval(function() {
  let newQuote = CIQ.clone(stxx.currentQuote());
  newQuote["Close"] = newQuote["Close"] + Math.round((Math.random() - .5) * 100) / 100;
  newQuote["Series-Name"] = newQuote["Series-Name"] + Math.round((Math.random() - .5) * 100) / 100;
  stxx.updateChartData([newQuote]);
}, 2000);

// This is just dummy code for adding a series. In real life you'll want to get the actual
// data for the stock symbol. Create an array of {DT, Value}

function getDataFromServer(symbol) {
  let newData = [];
  let dataStart;
  let dataEnd;
  newData[0] = {
    DT: stxx.masterData[0].DT,
    Close: stxx.masterData[0]["Close"]
  };

  if (symbol == "GE") {
    dataStart = stxx.masterData.length - 30;
    dataEnd = stxx.masterData.length - 10;
  } else if (symbol == "IBM") {
    dataStart = stxx.masterData.length - 50;
    dataEnd = stxx.masterData.length - 35;
  } else {
    dataStart = 2;
    dataEnd = stxx.masterData.length;
  };

  let sampling = stxx.masterData[0].Value
  for (let i = dataStart; i < dataEnd; i++) {
    // For each series, use the stock symbol name as the field name
    newData.push({
      DT: stxx.masterData[i].DT,
      Close: newData[newData.length - 1].Close + Math.round((Math.random() - .5) * 100) / 100
    });
  }

  return newData;
}

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>