API Reference
Namespaces
Classes
Events
Global
Externals

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.

Parameters:
Name Type Description
config Object

Config for renderer

Properties
Name Type Argument Description
params object <optional>

Parameters to control the renderer itself

Properties
Name Type Argument Default Description
defaultBorders boolean <optional>
false

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

widthFactor number <optional>
.8

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

heightPercentage number <optional>
.7

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

bindToYAxis boolean <optional>
true

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>
"overlaid"

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 border of down histogram bars.

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:	.7,	 // how high to go. 1 = 100%
		widthFactor:		.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
    }
});