API Reference

Class: Lines

CIQ.Renderer. Lines

new Lines(config)

Creates a lines renderer.

This renderer draws lines of various color, thickness, and pattern on a chart.

The Lines renderer is used to create the following chart types (including colored versions): line, mountain, baseline, wave, and step chart.

Note: By default, the renderer displays lines as underlays. As such, they appear below any other studies or drawings.

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

Name Type Description
config object

Configuration object for the renderer.

Name Type Argument Description
params object <optional>

Parameters to control the renderer itself.

Name Type Argument Default Description
width number <optional>

Width of the rendered line.

type string <optional>

Type of rendering; "line", "mountain", or "wave".

useChartLegend boolean <optional>

Set to true to use the built-in canvas legend renderer. See CIQ.ChartEngine.Chart#legendRenderer;

highlightable boolean <optional>

Set to false to prevent selection of series via hover.

style string <optional>

Style name to use in lieu of defaults for the type.

step boolean <optional>

Specifies a step chart.

baseline boolean | CIQ.ChartEngine.Chart#baseline <optional>

Specifies a baseline chart. If a baseline object is set, then the renderer uses those properties instead of the chart's baseline when rendering. When true, the renderer falls back to the chart's baseline properties for rendering.

colored boolean <optional>

Specifies the use of a color function (see CIQ.Renderer.registerColorFunction) to determine the color of the segment.

vertex boolean <optional>

Specifies drawing a dot on every vertex.

vertex_color boolean <optional>

Specifies a color for the vertices. If omitted, uses the default color (see CIQ.ChartEngine#getDefaultColor).

colorFunction string <optional>

Override string (or function) used to determine color of bar. May be an actual function or a string name of the registered function (see CIQ.Renderer.registerColorFunction).

Common valid parameters for use by CIQ.Renderer#attachSeries (see also CIQ.ChartEngine#plotLine):

  • color — Specify the color for the line by name or in RGBA or hexadecimal format.
  • pattern — Specify the pattern as an array. For instance, [5, 5] would be five pixels and then five empty pixels.
  • width — Specify the width of the line.
  • baseColor — Specify the color of the base of a mountain.
  • fillStyle — Specify the color to fill a mountain (other than color).
  • 4.0.0 New config.params.useChartLegend added.
  • 5.1.0 Removed subtype parameter, this will be determined internally from config.params.step=true.
  • 5.1.0 Added highlightable, overChart, step, baseline, vertex, style, colored, and colorFunction parameters.
  • 8.1.0 Added CIQ.ChartEngine.Chart#baseline type to baseline parameter. The new type contains a defaultLevel property which can be set to the desired baseline value. See example below.

Create a renderer and set a custom baseline.

const baseLineRenderer = new CIQ.Renderer.Lines({
	params: {
		baseline: { defaultLevel: 45 },
		yAxis: true,


// or

stxx.addSeries("GOOG", { baseline: { defaultLevel: 105 }, color: "purple" });

Add multiple series and attach to a custom y-axis on the left.

// See this example working here: https://jsfiddle.net/chartiq/b6pkzrad.

// Note how the addSeries callback is used to ensure the data is present before the series is displayed.

// Create the custom axis.
const axis = new CIQ.ChartEngine.YAxis();
axis.position = "left";
axis.textStyle = "#FFBE00";
axis.decimalPlaces = 0; // No decimal places on the axis labels.
axis.maxDecimalPlaces = 0; // No decimal places on the last price pointer.

// Create the renderer.
const renderer = stxx.setSeriesRenderer(
	new CIQ.Renderer.Lines({
		params: {
			name: "my-renderer",
			type: "mountain",
			yAxis: axis,

// Create your series and attach them to the chart when the data is loaded.
stxx.addSeries("NOK", { display: "NOK", width: 4 }, function () {
	renderer.attachSeries("NOK", "#FFBE00").ready();

stxx.addSeries("SNE", { display: "Sony", width: 4 }, function () {
	renderer.attachSeries("SNE", "#FF9300").ready();

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 masterData.

// Detach the series renderer from the chart.

// Delete the renderer itself.
renderer = null;

Create a colored step baseline mountain with vertices.

const renderer = stxx.setSeriesRenderer(
	new CIQ.Renderer.Lines({
		params: {
			name: "my-renderer",
			type: "mountain",
			baseline: true,
			step: true,
			colored: true,
			vertex: true,
			yAxis: axis,


<static> requestNew(featureList [, params])

Returns a new Lines renderer if the featureList calls for it FeatureList should contain whatever features requested; valid features: line, mountain, baseline (delta), step, vertex, colored, wave Anything else is an invalid feature and will cause function to return null Called by CIQ.Renderer.produce to create a renderer for the main series

Name Type Argument Description
featureList array

List of rendering terms requested by the user, parsed from the chartType

params object <optional>

Parameters used for the series to be created, used to create the renderer

  • 5.1.0


A new instance of the Lines renderer, if the featureList matches