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".
- Default Value:
"visible"
Supported Values:
Value hidden
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.- Default Value:
"inherit"
Supported Values:
Value inherit
off
on
-
line-style :"dotted"|"dashed"|"solid"
-
The line style. Only applies when the symbolType is "line" or "lineWithMarker".
- Default Value:
"solid"
Supported Values:
Value dashed
dotted
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".
- Default Value:
"none"
Supported Values:
Value largeChecker
largeCrosshatch
largeDiagonalLeft
largeDiagonalRight
largeDiamond
largeTriangle
none
smallChecker
smallCrosshatch
smallDiagonalLeft
smallDiagonalRight
smallDiamond
smallTriangle
-
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.- 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 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. -
symbol-type :"line"|"lineWithMarker"|"image"|"marker"
-
The type of legend symbol to display.
- Default Value:
"marker"
Supported Values:
Value image
line
lineWithMarker
marker
-
text :string
-
The legend item text.
- Default Value:
""