Element: <oj-picto-chart-item>

Oracle® JavaScript Extension Toolkit (JET)
15.1.0
F83698-01

Since:
  • 5.2.0
Module:
  • ojpictochart

QuickNav

Attributes

Other Topics


JET PictoChart Item

The oj-picto-chart-item element is used to declare properties for picto chart items and is only valid as the child of a template element for the itemTemplate slot of oj-picto-chart.


<oj-picto-chart data='[[dataProvider]]'>
 <template slot='itemTemplate' data-oj-as='item'>
   <oj-picto-chart-item count='[[item.data.count]]' name='[[item.data.name]]'>
   </oj-picto-chart-item>
 </template>
</oj-picto-chart>


Usage

Signature:

interface PictoChartItemElement<K=any>

Generic Parameters
ParameterDescription
KType 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.
Supported Values:
Value
inherit
off
on
Default Value:
  • "inherit"

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:
  • {}