Edit in JSFiddle

// instantiate your chart engine and configure defaults
var stxx = new CIQ.ChartEngine({
  container: $$$(".chartContainer"),
  //allowScroll: false,
  //allowZoom: false,
  layout: {
    chartType: "mountain",
    crosshair: true,
    candleWidth: 30,
  preferences: {
    whitespace: 0

// initialize the data feed (this can be called for initial data as well as updates for all instruments on the chart)
stxx.attachQuoteFeed(quoteFeedSimulator, {
  refreshInterval: 0 // no updates on this sample.

// Initialize the keys/names of the main instrument and sentiment for each stocked bar.
// if using the quote feed, these are the instruments that it will have to retrieve. 
var sentimentNeutral = 'O';
var sentimentNegative = 'N';
var sentimentPositive = 'P';
var symbol = 'MSFT';

// set up the function to draw the legend. Histograms do not automaticaly draw legends.
function histogramLegend(colors) {
  stxx.chart.legendRenderer(stxx, {
    chart: stxx.chart,
    legendColorMap: colors,
    coordinates: {
      x: 260,
      y: stxx.panels["chart"].yAxis.top + 30

// set up the y axis for the histogram renderer ( if you want a different one from the main symbol )
var axis = new CIQ.ChartEngine.YAxis();
axis.position = "left";
axis.textStyle = "#0019ff";
axis.width = 65;
axis.decimalPlaces = 0; // no decimal places on the axis labels
axis.maxDecimalPlaces = 0; // no decimal places on the last price pointer
axis.priceFormatter = function(stx, panel, amount) {
  // by default the axis will just display the numeric amount, 
  // in this case we want to format the output to also include the word 'articles'
  return Math.round(amount) + ' articles';

// create your histogram renderer
var histRenderer = stxx.setSeriesRenderer(new CIQ.Renderer.Histogram({
  params: {
    subtype: "stacked",
    heightPercentage: 0.2, // how high to go. 1 = 100%
    opacity: 0.6, // only needed if supporting IE8, otherwise can use rgba values in histMap instead
    widthFactor: 0.8, // to control space between bars. 1 = no space in between
    yAxis: axis,	// separate axis
    overChart: true // if omited the historgram will be drawn under the main chart.
  callback: histogramLegend

// set up the call back for your addSeries.
// in this case we will have it attach the series to the renderer once the data is loaded
function renderStackedBar(field, color, renderer) {
  return function(err) {
    if (!err) {
      renderer.attachSeries(field, color)
        .ready(); //use ready() to immediately draw the rendering

// draw the main chart
stxx.newChart(symbol, null, null, function() {

  // In this example the histogram represents negative, positive and neutral news sentiment data. 
  // The negative, positive and neutral data needs to be added one at a time so the chart knows the ranges and colors for each portion.

  // add the initial data for each portion of the stacked bar, 
  // and have the callback (renderStackedBar) attach it to the renderer and draw when the data is ready.
  // if you want to guarantee a specific loading order for each stacked bar, 
  // you can nest each series to the callback of the previous series so they attach in that order,
  // otherwise they will be stacked in the order in which initial data is returned.
  // in this case we are using the quotefeed to add initial data, but you can push specific data instead.

  stxx.addSeries(sentimentNegative, {
    display: "Negative"
  },renderStackedBar("N", "red",histRenderer)

  stxx.addSeries(sentimentNeutral, {
    display: "Neutral"

  stxx.addSeries(sentimentPositive, {
    display: "Positive"
  },renderStackedBar("P", "green",histRenderer)
}, {
  stretchToFillScreen: true
<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

<!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]-->

<script src="https://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>
<script src="https://jsfiddle.chartiq.com/chart/js/quoteFeedSimulator.js"></script>