Element: <oj-legend-item>

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01

Signature:

class ojLegendItem

QuickNav

Attributes


Version:
  • 8.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. 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:
  • ""