Element: <oj-chart-series>

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01

Signature:

class ojChartSeries

QuickNav

Attributes


Version:
  • 8.0.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 {ojChartSeries} 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 Series

The oj-chart-series element is used to declare series properties in the seriesTemplate slot of oj-chart.


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

Attributes

area-color :string

The area color of the series. Only applies if series type is area or lineWithArea.

area-svg-class-name :string

The CSS style class to apply if series type is area or lineWithArea. 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 color attribute.

area-svg-style :CSSStyleDeclaration=

The inline style to apply if series type is area or lineWithArea. 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 color attribute.

assigned-to-y2 :"on"|"off"

Defines whether the series is associated with the y2 axis. Only applies to Cartesian bar, line, area, and combo charts.
Supported Values:
Value
"off"
"on"
Default Value:
  • "off"

border-color :string

The border color of the series.

border-width :number

The border width of the series.

box-plot :ojChart.BoxPlotStyle=

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

categories :Array.<string>

An optional array of category strings corresponding to this series. This allows highlighting and filtering of a series through interactions with legend sections. If not defined, the series id is used.

color :string

The color of the series.

display-in-legend :"on"|"off"|"auto"

Defines whether the series should be shown in the legend. When set to 'auto', the series will not be displayed in the legend if it has null data or if it is a stock, funnel, or pyramid series.
Supported Values:
Value
"auto"
"off"
"on"
Default Value:
  • "auto"

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

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

line-style :"dotted"|"dashed"|"solid"

The line style of the data line. Only applies to line, lineWithArea, scatter, and bubble series.
Supported Values:
Value
"dashed"
"dotted"
"solid"

line-type :"straight"|"curved"|"stepped"|"centeredStepped"|"segmented"|"centeredSegmented"|"none"|"auto"

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.
Supported Values:
Value
"auto"
"centeredSegmented"
"centeredStepped"
"curved"
"none"
"segmented"
"stepped"
"straight"

line-width :number

The width of the data line. Only applies to line, lineWithArea, scatter, and bubble series.

marker-color :string

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

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 :"auto"|"square"|"circle"|"diamond"|"plus"|"triangleDown"|"triangleUp"|"human"|"star"|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.

marker-svg-class-name :string

The CSS style class to apply to the data markers. 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 marker color attribute.

marker-svg-style :CSSStyleDeclaration=

The inline style to apply to the data markers. 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 marker color attribute.

name :string

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

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

The pattern used to fill the series. 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"

pie-slice-explode :number

A number from 0 to 1 indicating the amount to explode the pie slice. Only applies to pie charts.
Default Value:
  • 0

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.

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.

stack-category :string

In stacked charts, groups series together for stacking. All series without a stackCategory will be assigned to the same stack.

svg-class-name :string

The CSS style class to apply to the series. For series of type lineWithArea, this style will only be applied to the line if areaSvgClassName is also specified. 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 color attribute.

svg-style :CSSStyleDeclaration=

The inline style to apply to the series. For series of type lineWithArea, this style will only be applied to the line if areaSvgStyle is also specified. 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 color attribute.

type :"bar"|"line"|"area"|"lineWithArea"|"candlestick"|"boxPlot"|"auto"

The type of data objects to display for this series. Only applies to bar, line, area, stock, box plot, and combo charts.
Supported Values:
Value
"area"
"auto"
"bar"
"boxPlot"
"candlestick"
"line"
"lineWithArea"
Default Value:
  • "auto"