Element: <oj-chart-series>

Oracle® JavaScript Extension Toolkit (JET)
11.0.0
F37993-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 :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
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. 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
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 :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"|"straight"|"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 :"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
auto <optional>
circle <optional>
diamond <optional>
human <optional>
plus <optional>
square <optional>
star <optional>
triangleDown <optional>
triangleUp <optional>

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

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"