Element: <oj-legend-item>

Oracle® JavaScript Extension Toolkit (JET)
9.0.0
F24343-01

Signature:

class ojLegendItem

QuickNav

Attributes

Version:
  • 9.0.0
Since:
  • 6.0.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 {ojLegendItem} from "ojs/ojlegend";

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

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

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
hidden
visible
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
inherit
off
on
Default Value:
  • "inherit"

line-style :dotted|dashed|solid

The line style. Only applies when the symbolType is "line" or "lineWithMarker".
Supported Values:
Value
dashed
dotted
solid
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 :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
largeChecker
largeCrosshatch
largeDiagonalLeft
largeDiagonalRight
largeDiamond
largeTriangle
none
smallChecker
smallCrosshatch
smallDiagonalLeft
smallDiagonalRight
smallDiamond
smallTriangle
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 :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
image
line
lineWithMarker
marker
Default Value:
  • "marker"

text :string

The legend item text.
Default Value:
  • ""