API Reference
Namespaces
Classes
Events
Global
Externals

Class: Shading

CIQ.Renderer. Shading


new Shading(config)

Creates a Shading renderer This is just like Lines renderer except it will allow shading between lines connected by a common y-axis.

Notes:

  • By default the renderer will display lines as underlays. As such, they will appear below the chart ticks and any other studies or drawings.
  • Series not linked to an explicit y-axis through a custom renderer must have 'shareYAxis' set to true to use this feature.

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

Example:

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 Description
width number <optional>

Width of the rendered line

Common valid parameters for use by attachSeries.:
color - Specify the color for the line and shading in rgba, hex or by name.
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.

Version:
  • ChartIQ Advanced Package

Methods


setShading(scheme)

Sets the shading scheme of the renderer. Lines must be connected by a common y-axis.

Example:

Parameters:
Name Type Description
scheme array

Single object or array of objects denoting shading.

Properties
Name Type Argument Description
primary string <optional>

Left series for comparison; if omitted, use chart.dataSegment[i].Close.

secondary string <optional>

Right series for comparison; if omitted, use first series in the seriesMap.

color string <optional>

Color in hex, RGB, RGBA, etc. to shade between primary and secondary.

greater string <optional>

Color in hex, RGB, RGBA, etc. to shade between primary and secondary if primary is greater in price than secondary.

lesser string <optional>

Color in hex, RGB, RGBA, etc. to shade between primary and secondary if primary is lesser in price than secondary.
Notes:

  • If scheme.greater and scheme.lesser are omitted, scheme.color is used.
  • If scheme.greater or scheme.lesser are omitted, stx.containerColor is used for the missing color.
  • At a bare minimum, scheme.color is required. It is not required if scheme.greater and scheme.lesser are supplied.
  • If scheme.primary is omitted, the shading will only occur if the series share the same axis as the chart.dataSegment[i].Close.
  • If shading cannot occur for any reason, series lines will still be drawn.
Version:
  • ChartIQ Advanced Package
Example
renderer.setShading([
	{primary:'ibm', secondary:'ge', greater:'green', lesser:'red'}, // switches shading based on crossover of values
	{primary:'aapl', secondary:'ge', greater:'orange'}, // same as above, but lesser color not specified, so shade that area the container color.
	{primary:'t', secondary:'intc', color:'blue'}, // color always blue between them regardless of which is higher or lower
	{secondary:'t', color:'yellow'}, // compares masterData with the named series
	{color:'yellow'} // automatically shades between master and the first series
]);