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


Oracle® JavaScript Extension Toolkit (JET)


  • 16.0.0
  • area-chart-series



Other Topics

JET Area Chart Series

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

 <oj-c-area-chart data="[[dataProvider]]">
  <template slot='seriesTemplate'>
      marker-shape='[[ $current.id == "Series 1" ? "square" : "circle" ]]'>


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



interface CAreaChartSeriesElement

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

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

For additional information visit:


categories :Array<string>

An array of category strings corresponding to the tag cloud items. This allows highlighting and filtering of items.

color :string

The color of the series. The chart legend item will inherit this color value.

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

Whether drilling is enabled on the series 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 series items at once, use the drilling attribute in the top level.

line-type :"curved"|"straight"

The line type of the data line or area. Only applies to line, area, scatter, and bubble series. centeredStepped and centeredSegmented are not supported for polar, scatter, and bubble charts.

marker-color :string

The color of the data markers, if different from the series color.

marker-displayed :string

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

name :string

The name of the series, displayed in the legend and tooltips.

short-desc :string

The description of this series. This is used for accessibility and for customizing the tooltip text on the corresponding legend item for the series.