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
This attribute is deprecated. Use hidden-categories on oj-legend instead
- Default Value:
"visible"
Supported Values:
Value Description hidden
Legend item will have a hollow symbol. visible
Legend item will be filled. -
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.- Default Value:
"inherit"
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. -
line-style :"dotted"|"dashed"|"solid"
-
The line style. Only applies when the symbolType is "line" or "lineWithMarker".
- Default Value:
"solid"
Supported Values:
Value Description dashed
Line will have dashed strokes. dotted
Line will have dotted strokes. solid
Line will have a solid stroke. -
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".
- Default Value:
"none"
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. -
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 formarker-svg-style
andmarker-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 formarker-svg-style
andmarker-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.
- Default Value:
"marker"
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. -
text :string
-
The legend item text.
- Default Value:
""