MarkCategoryOptions class (Graph)

MarkCategoryOptions()

new MarkCategoryOptions()

The MarkCategoryOptions object defines how zones related to specific categories are highlighted in the chart or on the axis. The CategoryAxisOptions.mark field uses an object of type MarkCategoryOptions to configure these highlights. It specifies the options used to highlight areas that correspond to particular categories. These highlighted areas are called mark zones and can appear either within the chart's plotting area or directly on the axis. A mark zone is created only when both the shape field (which defines the visual appearance of the zone) and the applyTo field (which specifies where the zone is applied) are defined and contain valid values. If either of these fields is missing or invalid, the mark zone is not displayed.

For instance, the "applyTo" option:

categoryAxis: { categories: "x", mark: { shape: "dodgerblue", applyTo: "(index mod 2) = 0", } }
highlights every second category (even-indexed categories) by applying the shape, which sets a DodgerBlue color, to categories with indices divisible by 2.
Since:
  • 4.4

Members

(static) applyTo :number|Array.<number>|string

The applyTo field specifies which categories are highlighted. It can be defined as a single category index, a list of indices, or a format-expression. When a format-expression is used, the following identifiers can be referenced:
  • "index" keyword defines the zero-based index of the category unit
  • "value" keyword defines the value associated with the category unit
  • "label" keyword defines the label of the category unit
The expression supports predefined constants, operators, and keywords as described in the expression syntax. For example, the expression "(index mod 2) = 0" highlights every second category (the even-indexed categories) by applying the shape to categories whose index is divisible by 2. Another example is "(date(value) format MMMM = `February`)", which highlights the entire month of February by applying the shape to categories whose value, when formatted as a month name, equals "February". The same result can also be achieved using "label = `February`", if the category labels contain the month names. If applyTo is set to null or an empty string, no category is highlighted.
Type:
  • number | Array.<number> | string
Example
null {null} or "" {string},  no unit in the category axis is highlighted
0 {number}, highlights the chart associated with the first unit of the category axis (category with index 0)
[0,1] {number[]}, highlights the first and second units of the category axis
"(index mod 2) = 0" {string}, highlights every second unit in the category axis (even-indexed categories)
"(date(value) format `MMMM` = `February`)" or "label = `February`" {string}, highlights the entire month of February
applyTo

(static) shape :any

The shape field defines the shape to apply on the chart/axis's background. The shape can be a string expression that defines shape's name within the exontrol.Shapes.Graph or exontrol.Shapes namespace, a CSS color, a JSON string-representation of an object of exontrol.Def.Shape type or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type. The applyTo field specifies the category to highlight using an index, a list of indices, or an expression where "index" refers to the category's unit index, "value" represents the unit's value, and "label" corresponds to the unit's label.
Type:
  • any
Example
"" {string}, null {null}, no shape is applied
"red" {string}, fills the object's background in red (CSS color)
'{"fillColor": "red"}' or '{"normal":{"fillColor": "red"}}' {string}, fills the object's background in red (JSON-representation of an object of exontrol.Def.Shape type)
"xxx" {string}, indicates that exontrol.Shapes.Graph.xxx or exontrol.Shapes.xxx is applied on the object's background. If the xxx field is missing, no custom shape is applied (no default object's shape is be applied)
"Button" or exontrol.Shapes.Button {object}, applies the "Button" shape on the object as defined into exontrol.Shapes namespace (@since 5.2)
shape

(static) showIn :Graph.ShowInEnum

The showIn field specifies the part of the control where the highlight appears, such as the axis, chart, or both. The default value is null, which is equivalent to exontrol.Graph.ShowInEnum.exAxis(1) or "chart", meaning the highlight appears in the chart section only. If set to "axis", the highlight appears in the axis section only. If set to "axis,chart", the highlight appears in both sections axis and chart. The shape field defines the shape to apply on the chart/axis's background.
Type:
Example
null {null} or exontrol.Graph.ShowInEnum.exChart {number} or 1 {number} or "chart" {string}, the highlight appears in chart section only (default)
exontrol.Graph.ShowInEnum.exAxis {number} or 2 {number} or "axis" {string}, the highlight appears in axis section only
"axis,chart" {string}, the highlight appears in both sections axis and chart
showIn