Element: <oj-legend-item>

Oracle® JavaScript Extension Toolkit (JET)
18.1.0
G25382-01

Since:
  • 6.0.0
Module:
  • ojlegend

QuickNav

Attributes

Other Topics


JET Legend Item

The oj-legend-item element is used to declare properties for legend items and is only valid as the child of a template element for the itemTemplate slot of oj-legend. 


<oj-legend data='[[dataProvider]]'>
 <template slot='itemTemplate'>
   <oj-legend-item  text='[[$current.data.text]]' color='[[$current.data.color]]'>
   </oj-legend-item>
 </template>
</oj-legend>

Migration

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

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.
pattern attribute

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

drilling attribute

For the initial version of oj-c-legend-item, drilling is not supported. We plan on supporting it in future releases.

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.


Usage

Signature:

interface LegendItemElement

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

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

For additional information visit:


Attributes

border-color :string

The border color of the marker. Only applies if symbolType is "marker" or "lineWithMarker".
Default Value:
  • ""

categories :Array.<string>

An array of categories for the legend item. Legend items currently only support a single category.
Default Value:
  • []

category-visibility :"hidden"|"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 Use hidden-categories on oj-legend instead
Supported Values:
Value Description
hidden Legend item will have a hollow symbol.
visible Legend item will be filled.
Default Value:
  • "visible"

color :string

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 :"on"|"off"|"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.
Supported Values:
Value Description
inherit The drilling behavior is inherited from legend.
off The legend item will not be drillable.
on The legend item will be drillable.
Default Value:
  • "inherit"

line-style :"dotted"|"dashed"|"solid"

The line style. Only applies when the symbolType is "line" or "lineWithMarker".
Supported Values:
Value Description
dashed Line will have dashed strokes.
dotted Line will have dotted strokes.
solid Line will have a solid stroke.
Default Value:
  • "solid"

line-width :number

The line width in pixels. Only applies when the symbolType is "line" or "lineWithMarker".

marker-color :string

The color of the marker, if different than the line color. Only applies if the symbolType is "lineWithMarker".

marker-shape :"circle"|"diamond"|"ellipse"|"human"|"plus"|"rectangle"|"square"|"star"|"triangleDown"|"triangleUp"|string

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.
Default Value:
  • "square"

marker-svg-class-name :string

The CSS style class to apply to the marker of the legend item symbol. This style class and marker-svg-style will override any other styling specified for the marker. 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.
Default Value:
  • ""

marker-svg-style :Partial<CSSStyleDeclaration>

The inline style to apply to the marker of the legend item symbol. This inline style and marker-svg-class-name will override any other styling specified for the marker. 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 :"smallChecker"|"smallCrosshatch"|"smallDiagonalLeft"|"smallDiagonalRight"|"smallDiamond"|"smallTriangle"|"largeChecker"|"largeCrosshatch"|"largeDiagonalLeft"|"largeDiagonalRight"|"largeDiamond"|"largeTriangle"|"none"

The pattern used to fill the marker. Only applies if symbolType is "marker" or "lineWithMarker".
Supported Values:
Value Description
largeChecker Large checker pattern is applied to the data item.
largeCrosshatch Large cross hatch pattern is applied to the data item.
largeDiagonalLeft Large diagonal left pattern is applied to the data item.
largeDiagonalRight Large diagonal right pattern is applied to the data item.
largeDiamond Large diamond pattern is applied to the data item.
largeTriangle Large triangle pattern is applied to the data item.
none No pattern is applied to data item fill.
smallChecker Small checker pattern is applied to the data item.
smallCrosshatch Small cross hatch pattern is applied to the data item.
smallDiagonalLeft Small diagonal left pattern is applied to the data item.
smallDiagonalRight Small diagonal right pattern is applied to the data item.
smallDiamond Small diamond pattern is applied to the data item.
smallTriangle Small triangle pattern is applied to the data item.
Default Value:
  • "none"

short-desc :string

The description of this legend item. This is used for accessibility and for customizing the tooltip text.
Default Value:
  • ""

source :string

The URI of the image of the legend symbol.
Default Value:
  • ""

svg-class-name :string

The CSS style class to apply to the legend item symbol. This style class and svg-style will override any other styling specified through the options except for marker-svg-style and marker-svg-class-name. 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.
Default Value:
  • ""

svg-style :Partial<CSSStyleDeclaration>

The inline style to apply to the legend item symbol. This inline style and svg-class-name will override any other styling specified through the options except for marker-svg-style and marker-svg-class-name. 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.

symbol-type :"line"|"lineWithMarker"|"image"|"marker"

The type of legend symbol to display.
Supported Values:
Value Description
image The legend symbol will be an image.
line The legend symbol will be a line.
lineWithMarker The legend symbol will be a line and a marker.
marker The legend symbol will be a marker.
Default Value:
  • "marker"

text :string

The legend item text.
Default Value:
  • ""