Element: <oj-legend>

Oracle® JavaScript Extension Toolkit (JET)
9.1.0
F30737-01

Signature:

class ojLegend<K, D extends ojLegend.Item<K>|ojLegend.Section<K>|any>

QuickNav

Slots

Attributes


Context Objects

Events

Methods

Type Definitions

JET Custom Elements

JET components are implemented as custom HTML elements. In addition to the component attributes documented in this page, JET components also support standard HTML global attributes like id and aria-label.

The JET data binding syntax can be used to define both component and global attributes through the use of dynamically evaluated expressions. All attributes (component and global) support attribute-level binding by prefixing the attribute name with ":" (e.g. :id="[...]"). When using attribute-level binding, all expression values are treated as strings. Additionally, component attributes support property-level binding by using the attribute name directly with no ":" prefix. When using property-level binding, the expressions should evaluate to the types documented by the corresponding attributes. Property-level binding is strongly recommended over attribute-level binding for component attributes.

A detailed description of working with custom HTML elements can be found in: JET Custom Element Usage.


Version:
  • 9.1.0
Since:
  • 0.7.0
Module:
  • ojlegend

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {ojLegend} from "ojs/ojlegend";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojlegend";
Generic Parameters
ParameterDescription
KType of key of the dataprovider
DType of data from the dataprovider

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.


JET Legend

A themable, WAI-ARIA compliant legend for JET.


<oj-legend
 orientation='vertical'
 sections='[{"items": [
             {"text": "Database"},
             {"text": "Middleware"},
             {"text": "Application"}
           ]}]'
>
</oj-legend>

Touch End User Information

Target Gesture Action
Legend Item Tap Filter when hideAndShowBehavior is enabled.
Press & Hold Highlight when hoverBehavior is enabled.

Keyboard End User Information

Key Action
Tab Move focus to next element.
Shift + Tab Move focus to previous element.
UpArrow Move focus to previous item.
DownArrow Move focus to next item.
LeftArrow Move focus to previous item (on left).
RightArrow Move focus to next item (on right).
Enter Hides or unhides the data associated with the current item.

Reading direction

As with any JET component, in the unusual case that the directionality (LTR or RTL) changes post-init, the component must be refresh()ed.

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.

Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

itemTemplate

The itemTemplate slot is used to specify the template for creating items of the legend. The slot content must be wrapped in a <template> element. The content of the template should be a single <oj-legend-item> element. See the oj-legend-item doc for more details.

When the template is executed for each area, it will have access to the components's binding context containing the following properties:

  • $current - an object that contains information for the current node. (See oj.ojLegend.ItemTemplateContext or the table below for a list of properties available on $current)
  • alias - if 'as' attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-legend> custom element
data Object The data object of the node
index number The zero-based index of the current node
key any The key of the current node
parentData Array An array of data objects of the outermost to innermost parents of the node
parentKey any The key of the parent node

sectionTemplate

The sectionTemplate slot is used to specify the template for creating sections of the legend. The slot content must be wrapped in a <template> element. The content of the template should be a single <oj-legend-section> element. See the oj-legend-section doc for more details.

When the template is executed for each area, it will have access to the components's binding context containing the following properties:

  • $current - an object that contains information for the current node. (See the table below for a list of properties available on $current)
  • alias - if 'as' attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-legend> custom element
data Object The data object of the node
index number The zero-based index of the current node
key any The key of the current node
parentData Array An array of data objects of the outermost to innermost parents of the node
parentKey any The key of the parent node

Attributes

as :string

An alias for the $current context variable passed to slot content for the nodeTemplate slot.
Deprecated:
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.
Default Value:
  • ""
Names
Item Name
Property as
Property change event asChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-as-changed

data :oj.DataProvider<K, D>|null

The oj.DataProvider for the sections and items of the legend. It should provide a data tree where each node in the data tree corresponds to a section or item in the legend. Nodes that are leaves will be treated as items. The row key will be used as the id for legend sections and items. Note that when using this attribute, a template for the itemTemplate and optionally sectionTemplate slots should be provided. The oj.DataProvider can either have an arbitrary data shape, in which case an element (and an element for hierarchical data) must be specified in the itemTemplate (and sectionTemplate) slot or it can have oj.ojLegend.Itemoj.ojLegend#Item (and oj.ojLegend.Sectionoj.ojLegend#Section) as its data shape, in which case no template is required.
Default Value:
  • null
Names
Item Name
Property data
Property change event dataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-changed

drilling :on|off

Whether drilling is enabled on all legend items. Drillable objects will show a pointer cursor on hover and fire ojDrill event on click. To enable or disable drilling on individual legend item, use the drilling attribute in each legend item.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property drilling
Property change event drillingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-drilling-changed

expanded :oj.KeySet<K>|null

Specifies the key set containing the ids of sections that should be expanded on initial render. Use the KeySetImpl class to specify sections to expand. Use the AllKeySetImpl class to expand all sections. By default, all sections are expanded.
Supports writeback:
  • true
Names
Item Name
Property expanded
Property change event expandedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-expanded-changed

halign :center|end|start

Defines the horizontal alignment of the legend contents.
Supported Values:
Value
center
end
start
Default Value:
  • "start"
Names
Item Name
Property halign
Property change event halignChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-halign-changed

hidden-categories :Array.<string>

An array of categories that will be hidden.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property hiddenCategories
Property change event hiddenCategoriesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hidden-categories-changed

hide-and-show-behavior :on|off

Defines whether the legend can be used to initiate hide and show behavior on referenced data items.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property hideAndShowBehavior
Property change event hideAndShowBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hide-and-show-behavior-changed

highlighted-categories :Array.<string>

An array of categories that will be highlighted.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property highlightedCategories
Property change event highlightedCategoriesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-highlighted-categories-changed

hover-behavior :dim|none

Defines the behavior applied when hovering over a legend item.
Supported Values:
Value
dim
none
Default Value:
  • "none"
Names
Item Name
Property hoverBehavior
Property change event hoverBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hover-behavior-changed

hover-behavior-delay :number

Specifies initial hover delay in ms for highlighting items in legend.
Default Value:
  • 200
Names
Item Name
Property hoverBehaviorDelay
Property change event hoverBehaviorDelayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hover-behavior-delay-changed

orientation :horizontal|vertical

Defines the orientation of the legend, which determines the direction in which the legend items are laid out.
Supported Values:
Value
horizontal
vertical
Default Value:
  • "vertical"
Names
Item Name
Property orientation
Property change event orientationChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-orientation-changed

scrolling :off|asNeeded

Defines whether scrolling is enabled for the legend.
Supported Values:
Value
asNeeded
off
Default Value:
  • "asNeeded"
Names
Item Name
Property scrolling
Property change event scrollingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scrolling-changed

sections :(Array.<oj.ojLegend.Section.<K>>|Promise.<Array.<oj.ojLegend.Section.<K>>>|null)

An array of objects with the following properties defining the legend sections.
Type details
Setter Type(Array.<oj.ojLegend.Section.<K>>|Promise.<Array.<oj.ojLegend.Section.<K>>>|null)
Getter Type(Promise.<Array.<oj.ojLegend.Section.<K>>>|null)
Default Value:
  • null
Names
Item Name
Property sections
Property change event sectionsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-sections-changed

symbol-height :number

The height of the legend symbol (line or marker) in pixels. If the value is 0, it will take the same value as symbolWidth. If both symbolWidth and symbolHeight are 0, then it will use a default value that may vary based on theme.
Default Value:
  • 0
Names
Item Name
Property symbolHeight
Property change event symbolHeightChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-symbol-height-changed

symbol-width :number

The width of the legend symbol (line or marker) in pixels. If the value is 0, it will take the same value as symbolWidth. If both symbolWidth and symbolHeight are 0, then it will use a default value that may vary based on theme.
Default Value:
  • 0
Names
Item Name
Property symbolWidth
Property change event symbolWidthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-symbol-width-changed

text-style :CSSStyleDeclaration

The CSS style object defining the style of the legend item text. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property textStyle
Property change event textStyleChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-text-style-changed

track-resize :on|off

Defines whether the element will automatically render in response to changes in size. If set to off, then the application is responsible for calling refresh to render the element at the new size.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-track-resize-changed

translations :object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed

(nullable) translations.component-name :string

Used to describe the data visualization type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Legend"
Names
Item Name
Property translations.componentName

(nullable) translations.label-and-value :string

Used to display a label and its value.

See the translations attribute for usage examples.

Default Value:
  • "{0}: {1}"
Names
Item Name
Property translations.labelAndValue

(nullable) translations.label-clear-selection :string

Text shown for clearing multiple selection on touch devices.

See the translations attribute for usage examples.

Default Value:
  • "Clear Selection"
Names
Item Name
Property translations.labelClearSelection

(nullable) translations.label-count-with-total :string

Used to display a count out of a total.

See the translations attribute for usage examples.

Default Value:
  • "{0} of {1}"
Names
Item Name
Property translations.labelCountWithTotal

(nullable) translations.label-data-visualization :string

Label for data visualizations used for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Data Visualization"
Names
Item Name
Property translations.labelDataVisualization

(nullable) translations.label-invalid-data :string

Text shown when the component receives invalid data.

See the translations attribute for usage examples.

Default Value:
  • "Invalid data"
Names
Item Name
Property translations.labelInvalidData

(nullable) translations.label-no-data :string

Text shown when the component receives no data.

See the translations attribute for usage examples.

Default Value:
  • "No data to display"
Names
Item Name
Property translations.labelNoData

(nullable) translations.state-collapsed :string

Used to describe the collapsed state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Collapsed"
Names
Item Name
Property translations.stateCollapsed

(nullable) translations.state-drillable :string

Used to describe a drillable object for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Drillable"
Names
Item Name
Property translations.stateDrillable

(nullable) translations.state-expanded :string

Used to describe the expanded state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Expanded"
Names
Item Name
Property translations.stateExpanded

(nullable) translations.state-hidden :string

Used to describe the hidden state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Hidden"
Names
Item Name
Property translations.stateHidden

(nullable) translations.state-isolated :string

Used to describe the isolated state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Isolated"
Names
Item Name
Property translations.stateIsolated

(nullable) translations.state-maximized :string

Used to describe the maximized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Maximized"
Names
Item Name
Property translations.stateMaximized

(nullable) translations.state-minimized :string

Used to describe the minimized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Minimized"
Names
Item Name
Property translations.stateMinimized

(nullable) translations.state-selected :string

Used to describe the selected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Selected"
Names
Item Name
Property translations.stateSelected

(nullable) translations.state-unselected :string

Used to describe the unselected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Unselected"
Names
Item Name
Property translations.stateUnselected

(nullable) translations.state-visible :string

Used to describe the visible state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Visible"
Names
Item Name
Property translations.stateVisible

(nullable) translations.tooltip-collapse :string

Used for the collapse tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Collapse"
Names
Item Name
Property translations.tooltipCollapse

(nullable) translations.tooltip-expand :string

Used for the expand tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Expand"
Names
Item Name
Property translations.tooltipExpand

valign :middle|bottom|top

Defines the vertical alignment of the legend contents.
Supported Values:
Value
bottom
middle
top
Default Value:
  • "top"
Names
Item Name
Property valign
Property change event valignChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-valign-changed

Context Objects

Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

Properties:
Name Type Description
subId string Sub-id string to identify a particular dom node.

Following are the valid subIds:

oj-legend-item

Context for legend items indexed by their section and item indices.

Properties:
Name Type Description
sectionIndexPath Array The array of numerical indices for the section.
itemIndex number The index of the item within the specified section.

Events

ojDrill

Triggered during a drill gesture (single click on the legend item).
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
id any the id of the drilled object

Methods

getContextByNode(node) : {(oj.ojLegend.NodeContext|null)}

Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects.
Parameters:
Name Type Argument Description
node Element <not nullable>
 The child DOM node
Returns:
The context for the DOM node, or null when none is found.
Type
(oj.ojLegend.NodeContext|null)

getItem(subIdPath) : {(oj.ojLegend.ItemContext|null)}

Returns an object with the following properties for automation testing verification of the legend item with the specified subid path.
Parameters:
Name Type Description
subIdPath Array The array of indices in the subId for the desired legend item.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
An object containing properties for the legend item at the given subIdPath, or null if none exists.
Type
(oj.ojLegend.ItemContext|null)

getPreferredSize(width, height) : {(oj.ojLegend.PreferredSize|null)}

Returns the preferred size of the legend, given the available width and height.
Parameters:
Name Type Description
width number The available width for the legend to render within.
height number The available height for the legend to render within.
Returns:
An object containing the preferred width and height.
Type
(oj.ojLegend.PreferredSize|null)

getProperty(property) : {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Since:
  • 4.0.0
Returns:
Type
any
Example

Get a single subproperty of a complex property:

let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

getSection(subIdPath) : {(oj.ojLegend.SectionContext|null)}

Returns an object with the following properties for automation testing verification of the legend section with the specified subid path.
Parameters:
Name Type Description
subIdPath Array The array of indices in the subId for the desired legend section.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
An object containing properties for the legend section at the given subIdPath, or null if none exists.
Type
(oj.ojLegend.SectionContext|null)

refresh : {void}

Refreshes the component.
Returns:
Type
void

setProperties(properties) : {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) : {void}

Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");

Type Definitions

Item<K>

Object type that defines a chart data item.
Properties:
Name Type Argument Default Description
borderColor string <optional>
 The border color of the marker. Only applies if symbolType is "marker" or "lineWithMarker".
categories Array.<string> <optional>
 An array of categories for the legend item. Legend items currently only support a single category. If no category is specified, this defaults to the id or text of the legend item.
categoryVisibility "hidden" | "visible" <optional>
 "visible" Defines whether the legend item corresponds to visible data items. A hollow symbol is shown if the value is "hidden".
color string <optional>
 The color of the legend symbol (line or marker). When symbolType is "lineWithMarker", this attribute defines the line color and the markerColor attribute defines the marker color.
drilling "off" | "on" | "inherit" <optional>
 "inherit" Whether drilling is enabled on the legend item. Drillable objects will show a pointer cursor on hover and fire ojDrill event on click. To enable drilling for all legend items at once, use the drilling attribute in the top level.
id K <optional>
 The id of the legend item, which is provided as part of the context for events fired by the legend. If not specified, the id defaults to the text of the legend item if a DataProvider is not being used. For the DataProvider case, the key for the node will be used as the id.
lineStyle "dashed" | "dotted" | "solid" <optional>
 "solid" The line style. Only applies when the symbolType is "line" or "lineWithMarker".
lineWidth number <optional>
 The line width in pixels. Only applies when the symbolType is "line" or "lineWithMarker".
markerColor string <optional>
 The color of the marker, if different than the line color. Only applies if the symbolType is "lineWithMarker".
markerShape "circle" | "diamond" | "ellipse" | "human" | "plus" | "rectangle" | "square" | "star" | "triangleDown" | "triangleUp" | string <optional>
 "square" The shape of the marker. Only applies if symbolType is "marker" or "lineWithMarker". Can take the name of a built-in shape or the SVG path commands for a custom shape. Does not apply if a custom image is specified.
markerSvgClassName string <optional>
 The CSS style class to apply to the marker. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the markerColor attribute.
markerSvgStyle CSSStyleDeclaration <optional>
 The inline style to apply to the marker. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the markerColor attribute. Only SVG CSS style properties are supported.
pattern "largeChecker" | "largeCrosshatch" | "largeDiagonalLeft" | "largeDiagonalRight" | "largeDiamond" | "largeTriangle" | "none" | "smallChecker" | "smallCrosshatch" | "smallDiagonalLeft" | "smallDiagonalRight" | "smallDiamond" | "smallTriangle" <optional>
 "none" The pattern used to fill the marker. Only applies if symbolType is "marker" or "lineWithMarker".
shortDesc string <optional>
 The description of this legend item. This is used for accessibility and for customizing the tooltip text.
source string <optional>
 The URI of the image of the legend symbol.
svgClassName string <optional>
 The CSS style class to apply to the legend item. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the color attribute.
svgStyle CSSStyleDeclaration <optional>
 The inline style to apply to the legend item. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the color attribute. Only SVG CSS style properties are supported.
symbolType "image" | "line" | "lineWithMarker" | "marker" <optional>
 "marker" The type of legend symbol to display.
text string <optional>
 The legend item text.

ItemContext

Properties:
Name Type Description
text string The text of the legend item.

ItemTemplateContext

Properties:
Name Type Description
componentElement Element The <oj-legend> custom element
data Object The data object of the node
index number The zero-based index of the current node
key any The key of the current node
parentData Array An array of data objects of the outermost to innermost parents of the node
parentKey any The key of the parent node

NodeContext

Properties:
Name Type Description
itemIndex number The index of the item within the specified section.
sectionIndexPath Array.<number> The array of numerical indices for the section.
subId string Sub-id string to identify this dom node.

PreferredSize

Properties:
Name Type Description
width number The available width.
height number The available height.

Section<K>

Object type that defines a legend section.
Properties:
Name Type Argument Default Description
collapsible "on" | "off" <optional>
 "off" Whether the section is collapsible. Only applies if the legend orientation is vertical.
expanded "off" | "on" <optional>
 "on" Whether the section is initially expanded. Only applies if the section is collapsible.
id K The id of the legend section. For the DataProvider case, the key for the node will be used as the id.
items Array.<oj.ojLegend.Item.<K>> <optional>
 An array of objects with the following properties defining the legend items. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
sections Array.<oj.ojLegend.Section.<K>> <optional>
 An array of nested legend sections.
title string <optional>
 The title of the legend section.
titleHalign "center" | "end" | "start" <optional>
 "start" The horizontal alignment of the section title. If the section is collapsible or nested, only start alignment is supported.
titleStyle CSSStyleDeclaration <optional>
 The CSS style object defining the style of the section title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.

SectionContext

Properties:
Name Type Description
title string The title of the legend section.
sections Array.<object> Array of legend sections.
items Array.<object> Array of legend items.
getSection Function(number) Returns the section with the specified index.
Properties
Name Type Description
title string The title of the legend section.
sections string Array of legend sections.
items boolean Array of legend items.
getItems Function(number) Returns the item with the specified index.
Properties
Name Type Description
text string The text of the legend item.