Element: <oj-c-area-chart-item>


Oracle® JavaScript Extension Toolkit (JET)


  • 16.0.0
  • area-chart-item



Other Topics

JET Area Chart Item

The oj-c-area-chart-item element is used to declare item properties. See the Help documentation for more information.

 <oj-c-area-chart data="[[dataProvider]]">
  <template slot='itemTemplate'>
      group-id="[[ [$current.data.year] ]]">


Read the Accessibility Section of the oj-c-area-chart component for details about making this component accessible.



interface CAreaChartItemElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CAreaChartItemElement } from "oj-c/area-chart-item";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/area-chart-item";

For additional information visit:


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.

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

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.

group-id* :Array<string>

The array of ids for the groups 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.

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

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.

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

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.

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.

series-id* :string

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.

value* :number

The value for this data item. Null can be specified to skip a data point.

x :string

The x value. Mainly used to specify the date for mixed-frequency time axis. The date specified in the x value must be an ISO date string.