Element: <oj-legend-item>

Oracle® JavaScript Extension Toolkit (JET)
8.1.0
F24337-01

Signature:

class ojLegendItem

QuickNav

Attributes


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

marker-svg-style :CSSStyleDeclaration

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.

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

svg-style :CSSStyleDeclaration

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.

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