API Reference

Class: Histogram

CIQ.Renderer. Histogram

new Histogram(config)

Creates a multi-part histogram renderer where bars can be stacked one on top of the other, clustered next to each other, or overlaid over each other.

See CIQ.Renderer#construct for parameters required by all renderers.

See CIQ.ChartEngine#drawHistogram for more details.

Name Type Description
config Object

Config for renderer

Name Type Argument Description
params object <optional>

Parameters to control the renderer itself

Name Type Argument Default Description
defaultBorders boolean <optional>

Whether to draw a border for each bar as a whole. Can be overridden by a border set for a series.

widthFactor number <optional>

Width of each bar as a percentage of the candleWidth. Valid values are 0.00-1.00.

heightPercentage number <optional>

The amount of vertical space to use, valid values are 0.00-1.00.

bindToYAxis boolean <optional>

Set to true to bind the rendering to the y-axis and to draw it. Automatically set if params.yAxis is present.

subtype string <optional>

Subtype of rendering "stacked", "clustered", "overlaid"

Common valid parameters for use by attachSeries.:
fill_color_up - Color to use for up histogram bars.
fill_color_down - Color to use for down histogram bars.
border_color_up - Color to use for the border of up histogram bars.
border_color_down - Color to use for the order of down histogram bars.

  • ChartIQ Advanced Package
  • 7.5.0 Added the ability to draw negative bars when yAxis.baseline is set to zero or some other value (see examples).

// configure the histogram display
var params = {
	name: "Sentiment Data",
	subtype: "stacked",
	heightPercentage: 0.7, // how high to go. 1 = 100%
	widthFactor: 0.8, // to control space between bars. 1 = no space in between

//legend creation callback (optional)
function histogramLegend(colors) {
	stxx.chart.legendRenderer(stxx, {
		legendColorMap: colors,
		coordinates: { x: 260, y: stxx.panels["chart"].yAxis.top + 30 },
		noBase: true,

// set the renderer
var histRenderer = stxx.setSeriesRenderer(
	new CIQ.Renderer.Histogram({ params: params, callback: histogramLegend })

// add data and attach.
stxx.addSeries("^NIOALL", { display: "Symbol 1" }, function () {
	histRenderer.attachSeries("^NIOALL", "#6B9CF7").ready();
stxx.addSeries("^NIOAFN", { display: "Symbol 2" }, function () {
	histRenderer.attachSeries("^NIOAFN", "#95B7F6").ready();
stxx.addSeries("^NIOAMD", { display: "Symbol 3" }, function () {
	histRenderer.attachSeries("^NIOAMD", "#B9D0F5").ready();
// this is an example on how completely remove a renderer and all associated data.
	// This should only be necessary if you are also removing the chart itself

	// Remove all series from the renderer including series data from the masterData

	// detach the series renderer from the chart.

	// delete the renderer itself.
	delete renderer;

Set a baseline value, allowing negative bars.

const yax = new CIQ.ChartEngine.YAxis({
	baseline: 0,
const rndr = stxx.setSeriesRenderer(
	new CIQ.Renderer.Histogram({
		params: {
			// Can be an overlaid or clustered histogram.
			subtype: "clustered",
			yAxis: yax,

Render a horizontal line at the baseline value.

const yax = new CIQ.ChartEngine.YAxis({
	baseline: {
		value: 0,
		// Must provide color to render the horizontal line,
		// and can optionally provide pattern, lineWidth, and opacity.
		color: "red",
		pattern: "dotted",
		lineWidth: 2,
		opacity: 1,