Edit in JSFiddle

var stxx = new CIQ.ChartEngine({
  container: $$$(".chartContainer"),
  layout: {
    "chartType": "mountain"
  }
}); // Declare a CIQ.ChartEngine object. This is the main object for drawing charts.

// customize your axis style
stxx.chart.yAxis.goldenRatioYAxis = true;
//stxx.chart.xAxis.axisType = "ntb";

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

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

stxx.loadChart("MASTER", sampleData);

// This is just dummy code for streaming quotes (randomly generated to update the last tick)
setInterval(function() {
  var newQuote = CIQ.clone(stxx.currentQuote());
  newQuote.Close = newQuote.SERIES.Close + Math.round((Math.random() - 0.5) * 100) / 100;
  newQuote.Volume = newQuote.SERIES.Volume + Math.round((Math.random() + 0.5) * 100) / 100;
  newQuote.DT = new Date(+newQuote.DT + CIQ.DAY)
  stxx.updateChartData(newQuote, null, {
    secondarySeries: "SERIES",
    useAsLastSale: true
  })
}, 2000);

function backfillSeriesData() {
  var newData = [];
  for (var i = 0; i < stxx.masterData.length; i++) {
    var newQuote = CIQ.clone(stxx.masterData[i]);
    newQuote.Close = newQuote.Close + Math.round((Math.random() - 0.5) * 100) / 100;
    newQuote.Volume = newQuote.Volume + Math.round((Math.random() + 0.5) * 100) / 100;
    newData.push(newQuote)
  }
  return newData
}

// add the series 
stxx.addSeries("SERIES", {
  color: "green",
  // Dummy code to generate data to backfill the series 
  data: backfillSeriesData(),
  marginTop: 100, // give room for the legend
});
<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>

<script src="https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_DAILY.js"></script>
<script src="https://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>