Element: <oj-legend>

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 0.7.0
Module:
  • ojlegend

QuickNav

Slots

Attributes


Context Objects

Events

Methods

Type Definitions

Other Topics


JET Legend

A themable, WAI-ARIA compliant legend for JET.


<oj-legend
 orientation='vertical'
 data='[[dataProvider]]'
>
</oj-legend>

Accessibility

To make your component accessible, the application is required to include contextual information for screender readers using one or more the following methods as appropriate:
  • aria-describedby
  • aria-labelledby
  • aria-label
  • short-desc property of your items

When setting color, applications are responsible for making sure that the color meets the minimum contrast ratio.

If your application has custom keyboard and touch shortcuts implemented for the component, these shortcuts can conflict with those of the component. It is the application's responsibility to disclose these custom shortcuts, possibly via a datatip or help popup.

In the case of the text truncating, applications should provide the untruncated string or contextual text to the datatip to make the component accessible.

Migration

Read about current Core Pack limitations to decide when to migrate.
Please make note of the following:

To migrate from oj-legend to oj-c-legend, you need to revise the import statement and references to oj-legend in your app. Please note the changes between the two components below.
contextMenu slot

For the initial version of oj-c-legend, contextMenu slot is not supported. We plan on supporting this use case in future releases.

getContextByNode method

For the initial version of oj-c-legend, getContextByNode method is not supported. We plan on supporting this use case in future releases.

pattern attribute

For the inital versions of oj-c-legend and oj-c-legend-item, patterns are not supported. We plan on supporting it in future releases.

sectionTemplate

For the initial version of oj-c-legend, nested section is not supported. $current of sectionTemplate context will not contain parentKey and parentData properties.

text-style

For the initial version of oj-c-legend, the cursor property will not be supported in the text-style CSS style object.

getPreferredSize

For the initial version of oj-c-legend, getPreferredSize method is not supported.

To migrate from oj-legend-item to oj-c-legend-item, you need to revise the import statement and references to oj-legend-item in your app. Please note the changes between the two components below.
oj-legend-item's marker-shape attribute

marker-shape attribute only supports the built in shape enums. It does not support custom SVG path commands for a custom shape yet.

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 or Space Hides or unhides the data associated with the current item or a collapsible section.

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.


Usage

Signature:

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

Generic Parameters
ParameterDescription
KType of key of the dataprovider
DType of data from the dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { LegendElement } from "ojs/ojlegend";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojlegend";

For additional information visit:

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 data-oj-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
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data D The data object of the node
index number The zero-based index of the current node
key K The key of the current node
parentData Array<D> An array of data objects of the outermost to innermost parents of the node
parentKey K 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 data-oj-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
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data D The data object of the section node
index number The zero-based index of the current section node
key K The key of the current section node
parentData Array<D> An array of data objects of the outermost to innermost parents of the section node
parentKey K The key of the parent section 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 :(DataProvider.<K, D>|null)

The 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 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 Description
off Legend items will not be drillable.
on Legend items will be drillable.
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.
Deprecated:
Since Description
16.0.0 Use of legend collapsible section is not recommended in Redwood theme. As such, this attribute is deprecated.
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 Description
center Legend contents will be center aligned.
end Legend contents will be end aligned.
start Legend contents will be start aligned.
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 Description
off legend cannot be used to initiate hide and show behavior on referenced data items
on Legend can be used to initiate hide and show behavior on referenced data items.
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 Description
dim Dimming hover behavior is applied.
none No hover behavior will be applied.
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.
Deprecated:
Since Description
14.1.0 This is not recommended in the Redwood design system.
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 Description
horizontal Legend items will be horizontally placed in available space.
vertical Legend items will be vertically stacked.
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.
Deprecated:
Since Description
12.1.0 Setting scrolling to off is not supported in Redwood theme and it is not recommended. As such, this attribute is deprecated.
Supported Values:
Value Description
asNeeded The legend will be scrollable if legend items cannot fit in the available space.
off The legend will not be scrollable.
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

section-title-halign :"center"|"end"|"start"

The horizontal alignment of the section titles.
Supported Values:
Value Description
center The section title will be center aligned.
end The section title will be end aligned.
start The section title will be start aligned.
Names
Item Name
Property sectionTitleHalign
Property change event sectionTitleHalignChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-section-title-halign-changed

section-title-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the section titles' text. The following style properties are supported: color, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property sectionTitleStyle
Property change event sectionTitleStyleChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-section-title-style-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 :Partial<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.
Deprecated:
Since Description
15.0.0 With the track resize optimized, this API is no longer required. track-resize on will be the default behavior.
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.accessible-contains-controls :string

Used to describe a container that contains controls.

See the translations attribute for usage examples.

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
Since:
  • 15.0.0
Names
Item Name
Property translations.accessibleContainsControls

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

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
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.

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
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.

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
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.

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
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.

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
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.

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
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.

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
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.

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
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.

Deprecated:
Since Description
15.0.0 This is deprecated because it is not used by the oj-legend
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 Description
bottom The legend items will be bottom aligned.
middle The legend items will be middle aligned.
top The legend items will be top aligned.
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
itemIndex number The index of the item within the specified section.
sectionIndexPath Array The array of numerical indices for the 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".
Deprecated:
Since Description
14.1.0 This api is deprecated. Use hidden-categories in oj-legend instead.
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.
Deprecated:
Since Description
14.1.0 This is not recommended in the Redwood design system.
markerSvgStyle Partial<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.
Deprecated:
Since Description
14.1.0 This is not recommended in the Redwood design system.
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.
Deprecated:
Since Description
14.1.0 This is not recommended in the Redwood design system.
svgStyle Partial<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.
Deprecated:
Since Description
14.1.0 This is not recommended in the Redwood design system.
symbolType "image" | "line" | "lineWithMarker" | "marker" <optional>
 "marker" The type of legend symbol to display.
text string The legend item text.

ItemContext

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

ItemTemplateContext<K = any, D = any>

Properties:
Name Type Description
componentElement Element The <oj-legend> custom element
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data D The data object of the node
index number The zero-based index of the current node
key K The key of the current node
parentData Array<D> An array of data objects of the outermost to innermost parents of the node
parentKey K 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
height number The available height.
width number The available width.

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.
Deprecated:
Since Description
16.0.0 Use of legend collapsible section is not recommended in Redwood theme. As such, this attribute is deprecated.
expanded "off" | "on" <optional>
 "on" Whether the section is initially expanded. Only applies if the section is collapsible.
Deprecated:
Since Description
14.1.0 This attribute is deprecated. Applications should use the expanded API on oj-legend instead.
id K <optional>
 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.
Deprecated:
Since Description
15.1.0 Individual section title alignment is no longer supported. Use section-title-halign in oj-legend to align all section titles.
titleStyle Partial<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.
Deprecated:
Since Description
15.1.0 Individual section title style is no longer supported. Use section-title-style in oj-legend to style all section titles.

SectionContext

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

SectionTemplateContext<K = any, D = any>

Properties:
Name Type Description
componentElement Element The <oj-legend> custom element
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data D The data object of the section node
index number The zero-based index of the current section node
key K The key of the current section node
parentData Array<D> An array of data objects of the outermost to innermost parents of the section node
parentKey K The key of the parent section node