Class: Histogram

Parameters:

Version:

• ChartIQ Advanced Package

Since:

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

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 to 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
renderer.removeAllSeries(true);

// detach the series renderer from the chart.
stxx.removeSeriesRenderer(renderer);

// 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,
	},
});