Class: Banding

Banding

Specifies the coloring of bands on the chart. An example of where this would be used is in the extended hours presentation; the extended sessions can have different color backgrounds. To activate the banding, a button would need to be created, or it could be enabled through API function calls.

Since:

  • 9.4.0

Examples

Configuration of a button to toggle the "altdays" banding scheme (where `qc` is the CompactChart instance):

buttons: {
 ...
	types: {
		...
		stripe: {
			label: "|x| |",
			reader: "Striping",
			group: "settings",
			toggles: "altdays",
			action: function(qc) {
				const { toggles } = qc.banding;
				toggles[this.toggles] = !toggles[this.toggles];
				this.toggleActive(toggles[this.toggles]);
				qc.draw();
			},
			isActive: function(qc) { return !!qc.banding.toggles[this.toggles]; }
		},
		...
	},
	...
}

Toggle banding on and off via API function call (where `qc` is the CompactChart instance):

qc.banding.toggles.altdays = true | false;

Members

toggles

State of each banding type (true = on). {Record<string, boolean>}

Since:

  • 10.1.0

Type Definitions

BandingConfig

Configure the banding module.

Type:
Properties:
Name Type Argument Description
extendedHours BandingSegment <optional>

Banding type reserved for extended hours configuration.
* BandingSegment <optional>

Any other banding types.
Since:
  • 9.4.0 Introduced
  • 10.1.0 Added other banding types.

BandingFunction(record)

Function that processes a data record and returns a "session". A "session" is just a name of a property which is set up in the BandingSegment. The property's values include the backgroundColor property, which defines the color of the band for this record.

Parameters:
Name Type Description
record DataRecord

A quote record to examine. A DataRecord is an internal object which represents data for a specific time.
Since:

  • 10.1.0

Returns:

Name of a "session" to which this record belongs.

Type
string

BandingSegment

Defines how the banding will work for this particular banding type. This can be set up in the banding section of the themes modules for each theme, so custom colors can be set.

Type:
  • object
Properties:
Name Type Argument Description
processFn BandingFunction <optional>

Function that determines what band "session" to use. This function is not required for extendedHours band type.
divider object <optional>

Line treatment to use for vertical lines dividing the bands.

Properties
Name Type Argument Description
color string <optional>

Color of line.
width string <optional>

Width of line, include "px": e.g. 1px.
pattern string <optional>

Pattern of line, "dashed", "dotted", "solid".
_session_ Record.<string, object> <optional>

Band "session" and background color for it.
Since:

  • 9.4.0

Example

Configuration for a banding type called "altdays" that shades odd days on the chart:

banding: {
	modulePath: "./modules/banding.js",
	altdays: {
		processFn: (record) => (record.dT.getDate() % 2 ? "odd" : "even"),
		odd: {
			backgroundColor: "grey"
		}
	}
}