Usage
Signature:
interface PictoChartItemElement<K=any>
Generic Parameters
Parameter Description K Type of key of the dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { PictoChartItemElement } from "ojs/ojpictochart";
//For the transpiled javascript to load the element's module, import as below
import "ojs/ojpictochart";
For additional information visit:
Styling
-
CSS Variables
See JET CSS Variables for additional details.
Name | Type | Description |
---|---|---|
--oj-picto-chart-item-bg-color |
<color> | Pictochart item background color |
Attributes
-
border-color :string
-
The border color of the item. Does not apply if custom image is specified.
- Default Value:
''
-
border-width :number
-
The border width of the item in pixels. Does not apply if custom image is specified.
- Default Value:
0
-
categories :Array.<string>
-
An array of category strings corresponding to this picto chart item. This allows highlighting and filtering of items.
- Default Value:
[]
-
color :string
-
The color of the item. Does not apply if custom image is specified.
- Default Value:
''
-
column-span :number
-
The number of columns each shape (or custom image) spans. Used for creating a picto chart with mixed item sizes.
- Default Value:
1
-
count :number
-
Specifies the number of times that the shape (or custom image) is drawn. Fractional counts (such as 4.5) are supported; however, fractions other than the multiples of 0.5 should be avoided because the fractional rendering ignores the gaps between shapes and the irregularity of the shapes.
- Default Value:
1
-
drilling :"inherit"|"off"|"on"
-
Whether drilling is enabled on the item. Drillable items will show a pointer cursor on hover and fire an ojDrill event on click (double click if selection is enabled). To enable drilling for all items at once, use the drilling attribute in the top level.
- Default Value:
"inherit"
Supported Values:
Value inherit
off
on
-
name :string
-
The name of the item. Used for default tooltip and accessibility.
- Default Value:
''
-
row-span :number
-
The number of rows each shape (or custom image) spans. Used for creating a picto chart with mixed item sizes.
- Default Value:
1
-
shape :"circle"|"diamond"|"human"|"plus"|"rectangle"|"square"|"star"|"triangleDown"|"triangleUp"|"none"|string
-
The shape of the item. Can take the name of a built-in shape or the SVG path commands for a custom shape. "None" will make the item transparent and can be used to create gaps. Does not apply if custom image is specified.
- Default Value:
"rectangle"
-
(nullable) short-desc :(string | ((context: ojPictoChart.ItemShortDescContext<K>) => string))
-
The description of the item. This is used for accessibility and also for customizing the tooltip text.
-
source :string
-
The URI of the custom image. If specified, it takes precedence over shape.
- Default Value:
''
-
source-hover :string
-
The optional URI for the hover state. If not specified, the source image will be used.
- Default Value:
''
-
source-hover-selected :string
-
The optional URI for the hover selected state. If not specified, the source image will be used.
- Default Value:
''
-
source-selected :string
-
The optional URI for the selected state. If not specified, the source image will be used.
- Default Value:
''
-
svg-class-name :string
-
The CSS style class to apply to the item. The style class and inline style will override any other styling specified with other properties. For tooltip interactivity, it's recommended to also pass a representative color to the item color attribute. Does not apply if custom image is specified.
- Default Value:
''
-
svg-style :Partial<CSSStyleDeclaration>
-
The inline style to apply to the item. The style class and inline style will override any other styling specified with other properties. For tooltip interactivity, it's recommended to also pass a representative color to the item color attribute. Does not apply if custom image is specified. Only SVG CSS style properties are supported.
- Default Value:
{}