Histogram sample - quotefeed

Chart with a histogram using a quotefeed

by ChartIQ Library

HTML

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

<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]-->

JavaScript

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

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

// instantiate your chart engine and configure defaults
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".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. 
const sentimentNeutral = 'O';
const sentimentNegative = 'N';
const sentimentPositive = 'P';
const 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 )
const 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...