Element: <oj-chart-item>

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 5.1.0
Module:
  • ojchart

QuickNav

Attributes


JET Chart Item

The oj-chart-item element is used to declare item properties in the itemTemplate slot of oj-chart.


<oj-chart data="[[dataProvider]]">
 <template slot='itemTemplate'>
   <oj-chart-item
     value="[[$current.data.value]]"
     series-id="[[$current.data.productName]]"
     group-id="[[ [$current.data.year] ]]">
   </oj-chart-item>
 </template>
</oj-chart>


Usage

Signature:

interface ChartItemElement<K=any, D=any, I extends Array<ojChart.Item<any, null>>|Array<number>|null = Array<ojChart.Item<any, null>>|Array<number>|null>

Generic Parameters
ParameterDescription
KType of key of the dataprovider
DType of data from the dataprovider
IType of nested boxplot items
Typescript Import Format
//To typecheck the element APIs, import as below.
import { ChartItemElement } from "ojs/ojchart";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojchart";

For additional information visit:


Attributes

border-color :string

The border color of the data item. For funnel and pyramid charts, it is used for the slice border.

border-width :number

The border width of the data item. For funnel and pyramid charts, it is used for the slice border.

box-plot :ojChart.BoxPlotStyle=

An object containing the style properties of the box plot item.

categories :Array.<string>

An optional array of category strings corresponding to this data item. This enables highlighting and filtering of individual data items through interactions with the legend or other visualization elements. If not defined, series categories are used.

close :number

The close value for stock candlestick. When bar, line, or area series type are used on a stock chart, this value is displayed.

color :string

The color of the data item. This color value is not inherited by chart legend. See chart series color and display-in-legend for more details.

drilling :"on"|"off"|"inherit"

Whether drilling is enabled for the data item. Drillable objects 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 data items at once, use the drilling attribute in the top level.
Supported Values:
Value Description
inherit Drilling behavior will be inherited from the chart.
off Drilling will not be enabled for the data item.
on Drilling will be enabled for the data item.
Default Value:
  • "inherit"

group-id :Array.<(string|number)>

The array of id(s) for the group(s) the item belongs to. For hierarchical groups, it will be an array of outermost to innermost group ids. This is also used to specify the date for non mixed frequency time axes. The specified date for non mixed frequency time axes must be an ISO string.

high :number

The high value for range bar/area, stock candlestick, or box plot item. Define 'low' and 'high' instead of 'value' or 'y' to create a range bar/area chart.

items :(Array.<oj.ojChart.Item.<any, null>>|Array.<number>)=

An array of nested data items to be used for defining the markers for outliers or additional data items of a box plot.

label :string|Array.<string>

The label for the data item. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. Not supported for box plot or candlestick.

label-position :"center"|"outsideSlice"|"aboveMarker"|"belowMarker"|"beforeMarker"|"afterMarker"|"insideBarEdge"|"outsideBarEdge"|"none"|"auto"

The position of the data label. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. The 'outsideSlice' value only applies to pie charts. The 'aboveMarker', 'belowMarker', 'beforeMarker', and 'afterMarker' values only apply to line, area, scatter, and bubble series. The 'insideBarEdge' and 'outsideBarEdge' values only apply to non-polar bar series. Stacked bars do not support 'outsideBarEdge'. The chart does not currently adjust layout to fit labels within the plot area or deal with any overlaps between labels.
Supported Values:
Value Description
aboveMarker Label will be placed above the data marker. Only applies to line, area, scatter, and bubble series.
afterMarker Label will be placed after the data marker. Only applies to line, area, scatter, and bubble series.
auto For un-stacked bar charts, 'auto' will act as 'insideBarEdge'. For other chart types, 'auto' will act as 'center'.
beforeMarker Label will be placed before the data marker. Only applies to line, area, scatter, and bubble series.
belowMarker Label will be placed below the data marker. Only applies to line, area, scatter, and bubble series.
center Label will be placed in the center of the data marker.
insideBarEdge Label will be placed inside the bar edge. Only applies to non polar bar series.
none No data label is shown.
outsideBarEdge Label will be placed outside the bar edge. Only applies to non polar bar series.
outsideSlice Label will be placed outside the chart. Only applies to pie chart.

label-style :Partial<CSSStyleDeclaration>|Array.<Partial<CSSStyleDeclaration>>

The CSS style object defining the style of the data label. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.

low :number

The low value for range bar/area, stock candlestick, or box plot item. Define 'low' and 'high' instead of 'value' or 'y' to create a range bar/area chart.

marker-displayed :"on"|"off"|"auto"

Defines whether the data marker is displayed. Only applies to line, area, scatter, and bubble series. If auto, the markers will be displayed whenever the data points are not connected by a line.
Supported Values:
Value Description
auto Data markers will be displayed whenever the data points are not connected by a line.
off Data marker will not be displayed.
on Data marker will be displayed.

marker-shape :"circle"|"diamond"|"human"|"plus"|"square"|"star"|"triangleDown"|"triangleUp"|"auto"|string

The shape of the data markers. Only applies to line, area, scatter, and bubble series. In addition to the built-in shapes, it may also take SVG path commands to specify a custom shape. The chart will style the custom shapes the same way as built-in shapes, supporting properties like color and borderColor and applying hover and selection effects. Only 'auto' is supported for range series.
Supported Values:
Value Argument Description
auto <optional>
 Data marker shape will be based on chart type.
circle <optional>
 Data markers will be circular in shape.
diamond <optional>
 Data markers will be diamond in shape.
human <optional>
 Data markers will be human in shape.
plus <optional>
 Data markers will be plus in shape.
square <optional>
 Data markers will be square in shape.
star <optional>
 Data markers will be star in shape.
triangleDown <optional>
 Data markers will be of a triangular shape facing down.
triangleUp <optional>
 Data markers will be of a triangular shape facing up.

marker-size :number

The size of the data markers. Only applies to line, area, and scatter series. Does not apply to bubble charts, which calculate marker size based on the z values.

open :number

The open value for stock candlestick.

pattern :"smallChecker"|"smallCrosshatch"|"smallDiagonalLeft"|"smallDiagonalRight"|"smallDiamond"|"smallTriangle"|"largeChecker"|"largeCrosshatch"|"largeDiagonalLeft"|"largeDiagonalRight"|"largeDiamond"|"largeTriangle"|"auto"

The pattern used to fill the data item. A solid fill is used by default, unless the seriesEffect is 'pattern'.
Supported Values:
Value Description
auto No pattern is applied to data item fill.
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.
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.
Default Value:
  • "auto"

q1 :number

The first quartile value for box plot.

q2 :number

The second quartile (median) value for box plot.

q3 :number

The third quartile value for box plot.

series-id :string|number

The id for the series the item belongs to.

short-desc :(string | ((context: ojChart.ItemShortDescContext<K,D,I>) => string))

The description of this object. Will be lazily created if a function is used. 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 marker-shape.

source-hover :string

The optional URI for the hover state. If not specified, the source image will be used.

source-hover-selected :string

The optional URI for the hover selected state. If not specified, the source image will be used.

source-selected :string

The optional URI for the selected state. If not specified, the source image will be used.

svg-class-name :string

The CSS style class to apply to the data item. The style class and inline style will override any other styling specified through the properties. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute.

svg-style :Partial<CSSStyleDeclaration>

The CSS inline style to apply to the data item. The style class and inline style will override any other styling specified through the properties. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute. Only SVG CSS style properties are supported.

target-value :number

The target value for a funnel chart. When this is set, the value attribute defines the filled area within the slice and this represents the value of the whole slice.

value :number

The value for this data item. Corresponding to the y value for bar, line, area, and combo charts and the slice values for pie, funnel and pyramid charts. Null can be specified to skip a data point.

volume :number

The value for stock volume bar. When this value is provided, the volume bar is displayed on the y2 axis.

x :number|string

The x value. Mainly used for scatter and bubble chart and to specify the date for mixed-frequency time axis. For categorical axis, if the x value is not specified, it will default to the item index. For regular time axis, if the x value is not specified, it will default to the group name of the item. For mixed-frequency time axis, the date specified for the x value must be an ISO string.

y :number

The y value. Also the primary value for charts without a y-Axis, such as pie charts.

z :number

The z value. Defines the bubble radius for a bubble chart, as well as the width of a bar or a box plot item.