Element: <oj-chart-series>

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

Since:
  • 5.1.0
Module:
  • ojchart

QuickNav

Attributes


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>


Usage

Signature:

interface ChartSeriesElement

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

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

For additional information visit:


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 :Partial<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. Only SVG CSS style properties are supported.

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 Description
off The series is not associated with the y2 axis.
on The series is associated with the y2 axis.
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. The chart legend item will inherit this color value.

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 Description
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.
off Series will not be shown in the legend.
on Series will be shown in the legend.
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 Description
inherit The series drilling behavior is inherited from the chart.
off The series will not be drillable.
on The series will be drillable.
Default Value:
  • "inherit"

line-style :oj.ojChart.LineStyle

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

line-type :"curved"|"stepped"|"centeredStepped"|"segmented"|"centeredSegmented"|"none"|"straight"|"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 Description
auto Default value depending on series type.
centeredSegmented Data points will be connected with a centered segmented line.
centeredStepped Data points will be connected with a centered stepped line.
curved Data points will be connected with a curved line.
none Data points will not be connected.
segmented Data points will be connected with a segmented line.
stepped Data points will be connected with a stepped line.
straight Data points will be connected with a straight line.

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 Description
auto Data markers will be displayed whenever the data points are not connected by a line.
off Data markers belonging to the series will not be displayed.
on Data markers belonging to the series will be displayed.

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

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 :Partial<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. Only SVG CSS style properties are supported.

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

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 :Partial<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. Only SVG CSS style properties are supported.

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

The type of data objects to display for this series. Only applies to combo and stock charts.
Supported Values:
Value Description
area Series will be represented by an area. Use lineWithArea to prevent values from being obscured.
auto Series type will be inherited from chart type.
bar Series will be represented by a bar.
boxPlot Series will be represented by box plot markers. This is only supported for stock charts.
candlestick Series will be represented by candlestick markers. This is only supported for stock charts.
line Series will be represented by a line.
lineWithArea Series will be presented by a line and area.
Default Value:
  • "auto"