Element: <oj-legend-item>

Oracle® JavaScript Extension Toolkit (JET)
12.1.0
F52696-01

Since:
  • 6.0.0
Module:
  • ojlegend

QuickNav

Attributes


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>


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

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

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:
  • ""