Class: Heatmap

CIQ.Renderer. Heatmap

new Heatmap(config)

Creates a Heatmap renderer.

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

Each attached series will represent a stream of colors for the heatmap.

Note special data formatting when using addSeries, where the custom field that will be used for the stream of datapoints (Bids in our example), is an array of values.

Visual Reference - single color series:

For advanced heatmap implementations where all the data is received already with a color for each datapoint, use an injection that directly calls CIQ.ChartEngine#drawHeatmap as outlined in this example:

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
widthFactor number <optional>

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

height number <optional>

The amount of vertical space to use, in price units. For example, 2=>2 unit increments on yaxis.

  • ChartIQ Advanced Package
// note special data formatting, where the custom field name that will be used for the stream of datapoints, is an array of values.
var renderer = stxx.setSeriesRenderer(new CIQ.Renderer.Heatmap());
		data: [
			{ DT: "2019-01-04", Bids: [100, 100.3, 100.2, 101] },
			{ DT: "2019-01-07", Bids: [101, 101.5, 102, 103] },
			{ DT: "2019-01-08", Bids: [101.2, 101.5, 101.7, 102] },
			{ DT: "2019-01-09", Bids: [101.3, 101.7, 101.9] },
			{ DT: "2019-01-10", Bids: [102] }
	function() {
		renderer.attachSeries("L2", { field: "Bids", color: "#FF9300" }).ready();