Element: <oj-chart-item>

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

Signature:

class ojChartItem

QuickNav

Attributes


PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 7.1.0
Since:
  • 5.1.0
Module:
  • ojchart

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {ojChartItem} from "ojs/ojchart";

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

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.

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>

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.

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
"inherit"
"off"
"on"
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.

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
"aboveMarker"
"afterMarker"
"auto"
"beforeMarker"
"belowMarker"
"center"
"insideBarEdge"
"none"
"outsideBarEdge"
"outsideSlice"

label-style :CSSStyleDeclaration|Array<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.

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
"auto"
"off"
"on"

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

The shape of the data markers. 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.

marker-size :number

The size of the data markers. 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
"auto"
"largeChecker"
"largeCrosshatch"
"largeDiagonalLeft"
"largeDiagonalRight"
"largeDiamond"
"largeTriangle"
"smallChecker"
"smallCrosshatch"
"smallDiagonalLeft"
"smallDiagonalRight"
"smallDiamond"
"smallTriangle"
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

The description of this object. 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.

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 :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.

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.

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.