Element: <oj-chart>

Oracle® JavaScript Extension Toolkit (JET)
9.1.0
F30737-01

Signature:

class ojChart<K, D extends ojChart.DataItem<I>|any, I extends Array<ojChart.Item<any, null>>|Array<number>|null, C extends ojChart<K, D, I, null>|null>

QuickNav

Slots

Attributes


Context Objects

Events

Methods

Type Definitions

JET Custom Elements

JET components are implemented as custom HTML elements. In addition to the component attributes documented in this page, JET components also support standard HTML global attributes like id and aria-label.

The JET data binding syntax can be used to define both component and global attributes through the use of dynamically evaluated expressions. All attributes (component and global) support attribute-level binding by prefixing the attribute name with ":" (e.g. :id="[...]"). When using attribute-level binding, all expression values are treated as strings. Additionally, component attributes support property-level binding by using the attribute name directly with no ":" prefix. When using property-level binding, the expressions should evaluate to the types documented by the corresponding attributes. Property-level binding is strongly recommended over attribute-level binding for component attributes.

A detailed description of working with custom HTML elements can be found in: JET Custom Element Usage.


Version:
  • 9.1.0
Since:
  • 0.7.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 {ojChart} from "ojs/ojchart";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojchart";
Generic Parameters
ParameterDescription
KType of key of the dataprovider
DType of data from the dataprovider
IType of nested boxplot items
CType of chart for overview property

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

JET Chart with support for bar, line, area, combination, pie, scatter, bubble, funnel, box plot, and stock chart types.

The SVG DOM that this component generates should be treated as a black box, as it is subject to change.


<oj-chart
  type='bar'
  series='[{"name": "Q1 Sales", "items": [50, 60, 20]}]'
  groups='["Phone", "Tablets", "Laptops"]'
>
</oj-chart>

Accessibility

The application is responsible for populating the shortDesc value in the component properties object with meaningful descriptors when the component does not provide a default descriptor. Since component terminology for keyboard and touch shortcuts can conflict with those of the application, it is the application's responsibility to provide these shortcuts, possibly via a help popup.

Touch End User Information

Target Gesture Action
Data Item Tap Select when selectionMode is enabled.
Drill when drilling is enabled and selectionMode is none.
Double Tap Drill when drilling is enabled and selectionMode is enabled.
Press & Hold Display tooltip.
Display context menu on release.
Categorical Axis Item Tap Drill when drilling is enabled.
Legend Item Tap Drill when drilling is enabled.
Filter when hideAndShowBehavior is enabled.
Plot Area Drag Pan when panning is enabled and toggled into that mode.
Marquee select when selectionMode is multiple and toggled into that mode.
Pinch-close Zoom out when zooming is enabled.
Spread-open Zoom in when zooming is enabled.

Keyboard End User Information

Key Action
Tab Move focus to next element.
Shift + Tab Move focus to previous element.
UpArrow Move focus and selection to previous data item.
DownArrow Move focus and selection to next data item.
LeftArrow Move focus and selection to previous data item (on left).
RightArrow Move focus and selection to next data item (on right).
Shift + UpArrow Move focus and multi-select previous data item.
Shift + DownArrow Move focus and multi-select next data item.
Shift + LeftArrow Move focus and multi-select previous data item (on left).
Shift + RightArrow Move focus and multi-select next data item (on right).
Ctrl + UpArrow Move focus to previous data item, without changing the current selection.
Ctrl + DownArrow Move focus to next data item, without changing the current selection.
Ctrl + LeftArrow Move focus to previous data item (on left), without changing the current selection.
Ctrl + RightArrow Move focus to next data item (on right), without changing the current selection.
Ctrl + Spacebar Multi-select data item with focus.
= or + Zoom in one level if zooming is enabled.
- or _ Zoom out one level if zooming is enabled.
PageUp Pan up if scrolling is enabled.
PageDown Pan down if scrolling is enabled.
Shift + PageUp Pan left in left-to-right locales. Pan right in right-to-left locales.
Shift + PageDown Pan right in left-to-right locales. Pan left in right-to-left locales.
Enter Drill on data item, categorical axis label, or legend item when drilling is enabled.

Performance

Animation

Animation should only be enabled for visualizations of small to medium data sets. When animating changes to larger data sets or when animating between data sets, it's recommended to turn off the styleDefaults.animationIndicators, since they effectively double the amount of work required for the animation.

Data Set Size

As a rule of thumb, it's recommended that applications only set usable data densities on the chart. For example, it's not recommended to show more than 500 bars on a 500 pixel wide chart, since the bars will be unusably thin. While there are several optimizations within the chart to deal with large data sets, it's always more efficient to reduce the data set size as early as possible. Future optimizations will focus on improving end user experience as well as developer productivity for common use cases.

Styling

Use the highest level property available. For example, consider setting styling properties on styleDefaults or series, instead of styling properties on the individual data items. The chart can take advantage of these higher level properties to apply the style properties on containers, saving expensive DOM calls.

Tracking Resize

By default, the element will track resizes and render at the new size. This functionality adds a small overhead to the initial render for simple elements like gauges or spark charts, which become noticable when using large numbers of these simple elements. To disable resize tracking, set trackResize to off. The application can manually request a re-render at any time by calling the refresh function.

Reading direction

As with any JET component, in the unusual case that the directionality (LTR or RTL) changes post-init, the component must be refresh()ed.

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.

Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

groupTemplate

The groupTemplate slot is used to specify the template for generating the group properties of the chart. The slot content must be a single <template> element. The content of the template should only be one <oj-chart-group> element. See the oj-chart-group doc for more details.

When the template is executed for each group, it will have access to the chart's binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojChart.GroupTemplateContext or the table below for a list of properties available on $current)
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-chart> custom element
index number The group index
ids Array.<string> An array of group IDs, from the outermost group to the current group. For non-hierarchical group, the array will contain only one id.
depth number The depth of the group. The depth of the outermost group under the invisible root is 1.
leaf boolean True if the group is a leaf group.
items Array.<Object> The array of objects which are chart items that belong to this group. The objects will have the following properties:
Properties
Name Type Description
data D The data object for the item
index number The zero-based index of the item
key any The key of the current item

itemTemplate

The itemTemplate slot is used to specify the template for creating each item of the chart. The slot content must be a <template> element. The content of the template should only be one <oj-chart-item> element. See the oj-chart-item doc for more details. A series-id and group-id must be specified.

When the template is executed for each item, it will have access to the chart's binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojChart.ItemTemplateContext or the table below for a list of properties available on $current)
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-chart> custom element
index number The zero-based index of the current item
data Object The data object for the current item
key any The key of the current item

pieCenterTemplate

The pieCenterTemplate slot is used to specify custom center content for a pie chart. The slot content must be a single <template> element. This slot takes precedence over the pieCenter.renderer property if specified.

When the template is executed, the component's binding context is extended with the following properties:

  • $current - an object that contains information for the pie center. (See oj.ojChart.PieCenterContext or the table below for a list of properties available on $current)
Properties of $current:
Name Type Description
outerBounds Object Object containing (x, y, width, height) of the rectangle circumscribing the center area. The x and y coordinates are relative to the top, left corner of the element.
Properties
Name Type Description
x number The x coordinate of the rectangle circumscribing the center area, relative to the top, left corner of the element.
y number The y coordinate of the rectangle circumscribing the center area, relative to the top, left corner of the element.
width number The width of the rectangle circumscribing the center area.
height number The height of the rectangle circumscribing the center area.
innerBounds Object Object containing (x, y, width, height) of the rectangle inscribed in the center area. The x and y coordinates are relative to the top, left corner of the element.
Properties
Name Type Description
x number The x coordinate of the rectangle inscribed in the center area, relative to the top, left corner of the element.
y number The y coordinate of the rectangle inscribed in the center area, relative to the top, left corner of the element.
width number The width of the rectangle inscribed in the center area.
height number The height of the rectangle inscribed in the center area.
labelStyle CSSStyleDeclaration= The CSS style object defining the style of the label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
label string The pieCenter label.
totalValue number The total of all values in the pie chart.
componentElement Element The chart element.

seriesTemplate

The seriesTemplate slot is used to specify the template for generating the series properties of the chart. The slot content must be a single <template> element. The content of the template should only be one <oj-chart-series> element.See the oj-chart-series doc for more details.

When the template is executed for each series, it will have access to the chart's binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojChart.SeriesTemplateContext or the table below for a list of properties available on $current)
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-chart> custom element
index number The series index
id string The series id
items Array.<Object> The array of objects which are chart items that belong to this series. The objects will have the following properties
Properties
Name Type Description
data D The data object for the item
index number The zero-based index of the item
key any The key of the current item

tooltipTemplate

The tooltipTemplate slot is used to specify custom tooltip content. The slot content must be a single <template> element. This slot takes precedence over the tooltip.renderer property if specified.

When the template is executed, the component's binding context is extended with the following properties:

  • $current - an object that contains information for the current item. (See oj.ojChart.TooltipContext or the table below for a list of properties available on $current)
Properties of $current:
Name Type Description
parentElement Element The tooltip element. This can be used to change the tooltip border or background color.
id any The id of the hovered item.
series string The id of the series the hovered item belongs to.
group string | Array.<string> The ids or an array of ids of the group(s) the hovered item belongs to. For hierarchical groups, it will be an array of outermost to innermost group ids.
label string The data label of the hovered item.
value number The values of the hovered item.
x number | string The values of the hovered item.
y number The values of the hovered item.
z number The values of the hovered item.
low number The values of the hovered item.
high number The values of the hovered item.
open number The values of the hovered item.
close number The values of the hovered item.
volume number The values of the hovered item.
targetValue number The values of the hovered item.
data ojChart.Item<K, Array.<oj.ojChart.Item<any, null>> | Array.<number> | null> | number | null oj.ojChart.Item.<K, I> | Array.<number> | null> | number | null The data object of the hovered item. For nested items, it will be an array containing the parent item data and nested item data.
itemData D The row data object for the hovered item. This will only be set if a DataProvider is being used.
seriesData oj.ojChart.Series.<K, I> | null The data for the series the hovered item belongs to.
groupData Array.<oj.ojChart.Group> | null An array of data for the group the hovered item belongs to. For hierarchical groups, it will be an array of outermost to innermost group data related to the hovered item.
componentElement Element The chart element.
color string The color of the hovered item.

Attributes

animation-on-data-change :auto|slideToLeft|slideToRight|none

Defines the animation that is applied on data changes. Animation is automatically disabled when there are a large number of data items.
Supported Values:
Value
auto
none
slideToLeft
slideToRight
Default Value:
  • "none"
Names
Item Name
Property animationOnDataChange
Property change event animationOnDataChangeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-animation-on-data-change-changed

animation-on-display :auto|alphaFade|zoom|none

Defines the animation that is shown on initial display. Animation is automatically disabled when there are a large number of data items.
Supported Values:
Value
alphaFade
auto
none
zoom
Default Value:
  • "none"
Names
Item Name
Property animationOnDisplay
Property change event animationOnDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-animation-on-display-changed

as :string

An alias for the $current context variable when referenced inside the item, series, or group templates when using a DataProvider.
Deprecated:
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.
Default Value:
  • ""
Names
Item Name
Property as
Property change event asChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-as-changed

coordinate-system :polar|cartesian

The coordinate system of the chart. Only applies to bar, line, area, combo, scatter, and bubble charts.
Supported Values:
Value
cartesian
polar
Default Value:
  • "cartesian"
Names
Item Name
Property coordinateSystem
Property change event coordinateSystemChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-coordinate-system-changed

data :oj.DataProvider<K, D>|null

An object defining the series and groups, when using a DataProvider to provide data to the chart. The oj.DataProvider can either have an arbitrary data shape, in which case an element must be specified in the itemTemplate slot or it can have ojChart.DataItem as its data shape, in which case no template is required.
Default Value:
  • null
Names
Item Name
Property data
Property change event dataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-changed

data-cursor :off|on|auto

Defines whether the data cursor is enabled. If set to "auto", the data cursor is shown only for line or area charts on touch devices. The data cursor is not shown when the tooltip is null and it is not supported on polar charts.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property dataCursor
Property change event dataCursorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-cursor-changed

data-cursor-behavior :smooth|snap|auto

Defines the behavior of the data cursor when moving between data items.
Supported Values:
Value
auto
smooth
snap
Default Value:
  • "auto"
Names
Item Name
Property dataCursorBehavior
Property change event dataCursorBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-cursor-behavior-changed

data-cursor-position :Object

Specifies the position of the data cursor. Used for synchronizing data cursors across multiple charts. Null if the data cursor is not displayed.
Supports writeback:
  • true
Names
Item Name
Property dataCursorPosition
Property change event dataCursorPositionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-cursor-position-changed

data-cursor-position.x :number|string

The x value of the data cursor.
Default Value:
  • null
Names
Item Name
Property dataCursorPosition.x

data-cursor-position.y :number

The y value of the data cursor. If both y and y2 are defined, y will take precedence.
Default Value:
  • null
Names
Item Name
Property dataCursorPosition.y

data-cursor-position.y2 :number

The y2 value of the data cursor. If both y and y2 are defined, y will take precedence.
Default Value:
  • null
Names
Item Name
Property dataCursorPosition.y2

(nullable) data-label :((context: ojChart.DataLabelContext<K, D, I>) => (Array<string>|string|Array<number>|number))

A function that returns a custom data label. The function takes a DataLabelContext argument, provided by the chart. The function may return a number or a string or in the case of range charts, an array of numbers or strings. If any label is a number, it will be formatted by the valueFormat of the type 'label' before being used as a label.
Default Value:
  • null
Names
Item Name
Property dataLabel
Property change event dataLabelChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-label-changed

dnd :Object

Provides support for HTML5 Drag and Drop events. Please refer to third party documentation on HTML5 Drag and Drop to learn how to use it.
Names
Item Name
Property dnd
Property change event dndChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-dnd-changed

dnd.drag :Object

An object that describes drag functionality.
Names
Item Name
Property dnd.drag

dnd.drag.groups :Object

Allows dragging of chart groups from the categorical axis labels.
Names
Item Name
Property dnd.drag.groups

dnd.drag.groups.data-types :string|Array.<string>

The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed. For example, if selected employee data items are being dragged, dataTypes could be "application/employees+json". Drop targets can examine the data types and decide whether to accept the data. For each type in the array, dataTransfer.setData will be called with the specified type and the data. The data is an array of the dataContexts of the selected groups. The dataContext is the JSON version of the dataContext that we use for "tooltip" and "dataLabels" properties, excluding componentElement and parentElement. This property is required unless the application calls setData itself in a dragStart callback function.
Default Value:
  • null
Names
Item Name
Property dnd.drag.groups.dataTypes

dnd.drag.groups.drag :function(Event)

An optional callback function that receives the "drag" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.groups.drag

dnd.drag.groups.drag-end :function(Event)

An optional callback function that receives the "dragend" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.groups.dragEnd

dnd.drag.groups.drag-start :((event: Event, context: ojChart.DndGroup) => void)

An optional callback function that receives the "dragstart" event and context information as arguments. The context information is as follows:
  • groups {Array.(Object)}: An array of dataContexts of the dragged groups. The dataContext is the same as what we use for "tooltip" and "dataLabels" properties.
This function can set its own data and drag image as needed. When this function is called, event.dataTransfer is already populated with the default data and drag image.
Default Value:
  • null
Names
Item Name
Property dnd.drag.groups.dragStart

dnd.drag.items :Object

Allows dragging of chart data items, including bars, line/area/scatter markers, bubbles, and pie/funnel/pyramid slices.
Names
Item Name
Property dnd.drag.items

dnd.drag.items.data-types :string|Array.<string>

The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed. For example, if selected employee data items are being dragged, dataTypes could be "application/employees+json". Drop targets can examine the data types and decide whether to accept the data. For each type in the array, dataTransfer.setData will be called with the specified type and the data. The data is an array of the dataContexts of the selected data items. The dataContext is the JSON version of the dataContext that we use for "tooltip" and "dataLabels" properties, excluding componentElement and parentElement. This property is required unless the application calls setData itself in a dragStart callback function.
Default Value:
  • null
Names
Item Name
Property dnd.drag.items.dataTypes

dnd.drag.items.drag :function(Event)

An optional callback function that receives the "drag" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.items.drag

dnd.drag.items.drag-end :function(Event)

An optional callback function that receives the "dragend" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.items.dragEnd

dnd.drag.items.drag-start :((event: Event, context: ojChart.DndItem<K, D, I>) => void)

An optional callback function that receives the "dragstart" event and context information as arguments. The context information is as follows:
  • item {Array.(Object)}: An array of dataContexts of the dragged data items. The dataContext is the same as what we use for "tooltip" and "dataLabels" properties.
This function can set its own data and drag image as needed. When this function is called, event.dataTransfer is already populated with the default data and drag image.
Default Value:
  • null
Names
Item Name
Property dnd.drag.items.dragStart

dnd.drag.series :Object

Allows dragging of chart series from the legend items.
Names
Item Name
Property dnd.drag.series

dnd.drag.series.data-types :string|Array.<string>

The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed. For example, if selected employee data items are being dragged, dataTypes could be "application/employees+json". Drop targets can examine the data types and decide whether to accept the data. For each type in the array, dataTransfer.setData will be called with the specified type and the data. The data is an array of the dataContexts of the selected series. The dataContext is the JSON version of the dataContext that we use for "tooltip" and "dataLabels" properties, excluding componentElement and parentElement. This property is required unless the application calls setData itself in a dragStart callback function.
Default Value:
  • null
Names
Item Name
Property dnd.drag.series.dataTypes

dnd.drag.series.drag :function(Event)

An optional callback function that receives the "drag" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.series.drag

dnd.drag.series.drag-end :function(Event)

An optional callback function that receives the "dragend" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.series.dragEnd

dnd.drag.series.drag-start :((event: Event, context: ojChart.DndSeries<K, I>) => void)

An optional callback function that receives the "dragstart" event and context information as arguments. The context information is as follows:
  • series {Array.(Object)}: An array of dataContexts of the dragged series. The dataContext is the same as what we use for "tooltip" and "dataLabels" properties.
This function can set its own data and drag image as needed. When this function is called, event.dataTransfer is already populated with the default data and drag image.
Default Value:
  • null
Names
Item Name
Property dnd.drag.series.dragStart

dnd.drop :Object

An object that describes drop functionality.
Names
Item Name
Property dnd.drop

dnd.drop.legend :Object

Allows dropping on the legend.
Names
Item Name
Property dnd.drop.legend

dnd.drop.legend.data-types :string|Array.<string>

An array of MIME data types this element can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
Default Value:
  • null
Names
Item Name
Property dnd.drop.legend.dataTypes

dnd.drop.legend.drag-enter :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragenter" event and empty context information as arguments. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.legend.dragEnter

dnd.drop.legend.drag-leave :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragleave" event and empty context information as arguments.
Default Value:
  • null
Names
Item Name
Property dnd.drop.legend.dragLeave

dnd.drop.legend.drag-over :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragover" event and empty context information as arguments. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.legend.dragOver

dnd.drop.legend.drop :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "drop" event and empty context information as arguments. This function should call event.preventDefault() to indicate the dragged data can be accepted.
Default Value:
  • null
Names
Item Name
Property dnd.drop.legend.drop

dnd.drop.plot-area :Object

Allows dropping on the plot area.
Names
Item Name
Property dnd.drop.plotArea

dnd.drop.plot-area.data-types :string|Array.<string>

An array of MIME data types this element can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
Default Value:
  • null
Names
Item Name
Property dnd.drop.plotArea.dataTypes

dnd.drop.plot-area.drag-enter :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragenter" event and context information as arguments. The context information is as follows:
  • x {number}: The X axis value at the event position.
  • y {number}: The Y axis value at the event position.
  • y2 {number}: The Y2 axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.plotArea.dragEnter

dnd.drop.plot-area.drag-leave :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragleave" event and context information as arguments. The context information is as follows:
  • x {number}: The X axis value at the event position.
  • y {number}: The Y axis value at the event position.
  • y2 {number}: The Y2 axis value at the event position.
Default Value:
  • null
Names
Item Name
Property dnd.drop.plotArea.dragLeave

dnd.drop.plot-area.drag-over :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragover" event and context information as arguments. The context information is as follows:
  • x {number}: The X axis value at the event position.
  • y {number}: The Y axis value at the event position.
  • y2 {number}: The Y2 axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.plotArea.dragOver

dnd.drop.plot-area.drop :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "drop" event and context information as arguments. The context information is as follows:
  • x {number}: The X axis value at the event position.
  • y {number}: The Y axis value at the event position.
  • y2 {number}: The Y2 axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted.
Default Value:
  • null
Names
Item Name
Property dnd.drop.plotArea.drop

dnd.drop.x-axis :Object

Allows dropping on the X axis.
Names
Item Name
Property dnd.drop.xAxis

dnd.drop.x-axis.data-types :string|Array.<string>

An array of MIME data types this element can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
Default Value:
  • null
Names
Item Name
Property dnd.drop.xAxis.dataTypes

dnd.drop.x-axis.drag-enter :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragenter" event and context information as arguments. The context information is as follows:
  • x {number}: The X axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.xAxis.dragEnter

dnd.drop.x-axis.drag-leave :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragleave" event and context information as arguments. The context information is as follows:
  • x {number}: The X axis value at the event position.
Default Value:
  • null
Names
Item Name
Property dnd.drop.xAxis.dragLeave

dnd.drop.x-axis.drag-over :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragover" event and context information as arguments. The context information is as follows:
  • x {number}: The X axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.xAxis.dragOver

dnd.drop.x-axis.drop :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "drop" event and context information as arguments. The context information is as follows:
  • x {number}: The X axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted.
Default Value:
  • null
Names
Item Name
Property dnd.drop.xAxis.drop

dnd.drop.y2-axis :Object

Allows dropping on the Y2 axis.
Names
Item Name
Property dnd.drop.y2Axis

dnd.drop.y2-axis.data-types :string|Array.<string>

An array of MIME data types this element can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
Default Value:
  • null
Names
Item Name
Property dnd.drop.y2Axis.dataTypes

dnd.drop.y2-axis.drag-enter :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragenter" event and context information as arguments. The context information is as follows:
  • y2 {number}: The Y2 axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.y2Axis.dragEnter

dnd.drop.y2-axis.drag-leave :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragleave" event and context information as arguments. The context information is as follows:
  • y2 {number}: The Y2 axis value at the event position.
Default Value:
  • null
Names
Item Name
Property dnd.drop.y2Axis.dragLeave

dnd.drop.y2-axis.drag-over :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragover" event and context information as arguments. The context information is as follows:
  • y2 {number}: The Y2 axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.y2Axis.dragOver

dnd.drop.y2-axis.drop :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "drop" event and context information as arguments. The context information is as follows:
  • y2 {number}: The Y2 axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted.
Default Value:
  • null
Names
Item Name
Property dnd.drop.y2Axis.drop

dnd.drop.y-axis :Object

Allows dropping on the Y axis.
Names
Item Name
Property dnd.drop.yAxis

dnd.drop.y-axis.data-types :string|Array.<string>

An array of MIME data types this element can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
Default Value:
  • null
Names
Item Name
Property dnd.drop.yAxis.dataTypes

dnd.drop.y-axis.drag-enter :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragenter" event and context information as arguments. The context information is as follows:
  • y {number}: The Y axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.yAxis.dragEnter

dnd.drop.y-axis.drag-leave :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragleave" event and context information as arguments. The context information is as follows:
  • y {number}: The Y axis value at the event position.
Default Value:
  • null
Names
Item Name
Property dnd.drop.yAxis.dragLeave

dnd.drop.y-axis.drag-over :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "dragover" event and context information as arguments. The context information is as follows:
  • y {number}: The Y axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.yAxis.dragOver

dnd.drop.y-axis.drop :((event: Event, context: ojChart.DndDrop) => void)

An optional callback function that receives the "drop" event and context information as arguments. The context information is as follows:
  • y {number}: The Y axis value at the event position.
This function should call event.preventDefault() to indicate the dragged data can be accepted.
Default Value:
  • null
Names
Item Name
Property dnd.drop.yAxis.drop

drag-mode :pan|zoom|select|off|user

The action that is performed when a drag occurs on the chart. Pan and marquee zoom are only available if zoom and scroll is turned on. Marquee select is only available if multiple selection is turned on. If the value is set to "user" and multiple actions are available, buttons will be displayed on the plot area to let users switch between modes.
Supported Values:
Value
off
pan
select
user
zoom
Default Value:
  • "user"
Names
Item Name
Property dragMode
Property change event dragModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-drag-mode-changed

drilling :on|seriesOnly|groupsOnly|off

Whether drilling is enabled. Drillable objects will show a pointer cursor on hover and fire an ojDrill event on click (double click if selection is enabled). Use "on" to enable drilling for all series objects (legend items), group objects (x-axis labels), and data items. Use "seriesOnly" or "groupsOnly" to enable drilling for series objects or group objects only. To enable or disable drilling on individual series, group, or data item, use the drilling attribute in each series, group, or data item.
Supported Values:
Value
groupsOnly
off
on
seriesOnly
Default Value:
  • "off"
Names
Item Name
Property drilling
Property change event drillingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-drilling-changed

(nullable) group-comparator :((context1: ojChart.GroupTemplateContext<D>, context2: oj.ojChart.GroupTemplateContext<D>) => number)

A comparator function that determines the ordering of the chart groups when using a DataProvider. If undefined, the group will follow the order in which they are found in the data. The group objects will have the same properties as the context for groupTemplate's $current.
Default Value:
  • null
Names
Item Name
Property groupComparator
Property change event groupComparatorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-group-comparator-changed

groups :(Array.<string>|Promise.<Array.<string>>|Array.<oj.ojChart.Group>|Promise.<Array.<oj.ojChart.Group>>|null)

An array of strings identifying the group labels, or an array of Group objects specifying group labels and styles. Also accepts a Promise for deferred data rendering.
Default Value:
  • null
Names
Item Name
Property groups
Property change event groupsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-groups-changed

hidden-categories :Array.<string>

An array of category strings used for filtering. Series or data items with any category matching an item in this array will be filtered.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property hiddenCategories
Property change event hiddenCategoriesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hidden-categories-changed

hide-and-show-behavior :withRescale|withoutRescale|none

Defines the hide and show behavior that is performed when clicking on a legend item. When data items are hidden, the y axes can be optionally rescaled to fit to the remaining data.
Supported Values:
Value
none
withRescale
withoutRescale
Default Value:
  • "none"
Names
Item Name
Property hideAndShowBehavior
Property change event hideAndShowBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hide-and-show-behavior-changed

highlight-match :any|all

The matching condition for the highlightedCategories property. By default, highlightMatch is 'all' and only items whose categories match all of the values specified in the highlightedCategories array will be highlighted. If highlightMatch is 'any', then items that match at least one of the highlightedCategories values will be highlighted.
Supported Values:
Value
all
any
Default Value:
  • "all"
Names
Item Name
Property highlightMatch
Property change event highlightMatchChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-highlight-match-changed

highlighted-categories :Array.<string>

An array of category strings used for highlighting. Series or data items matching categories in this array will be highlighted.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property highlightedCategories
Property change event highlightedCategoriesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-highlighted-categories-changed

hover-behavior :dim|none

Defines the behavior applied when hovering over data items.
Supported Values:
Value
dim
none
Default Value:
  • "none"
Names
Item Name
Property hoverBehavior
Property change event hoverBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hover-behavior-changed

initial-zooming :first|last|none

Whether automatic initial zooming is enabled. The valid values are "first" to initially zoom to the first data points (after the viewportMin) that can fit in the plot area, "last" to initially zoom to the last data points (before the viewportMax), and "none" to disable initial zooming. Only applies to bar, line, area, and combo charts with zoomAndScroll turned on.
Supported Values:
Value
first
last
none
Default Value:
  • "none"
Names
Item Name
Property initialZooming
Property change event initialZoomingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-initial-zooming-changed

legend :Object

An object defining the style, positioning, and behavior of the legend.
Names
Item Name
Property legend
Property change event legendChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-legend-changed

legend.background-color :string

The color of the legend background.
Default Value:
  • null
Names
Item Name
Property legend.backgroundColor

legend.border-color :string

The border color of the legend.
Default Value:
  • null
Names
Item Name
Property legend.borderColor

legend.max-size :string

Defines the maximum size of the legend in pixels (e.g. '50px') or percent (e.g. '15%').
Default Value:
  • null
Names
Item Name
Property legend.maxSize

legend.position :start|end|bottom|top|auto

The position of the legend within the chart. By default, the legend will be placed on the side or bottom, based on the size of the chart and the legend contents.
Supported Values:
Value
auto
bottom
end
start
top
Default Value:
  • "auto"
Names
Item Name
Property legend.position

legend.reference-object-section :Object

An object with the following properties for the reference object section in the legend.
Names
Item Name
Property legend.referenceObjectSection

legend.reference-object-section.title :string

The title of the reference object section.
Default Value:
  • null
Names
Item Name
Property legend.referenceObjectSection.title

legend.reference-object-section.title-halign :center|end|start

The horizontal alignment of the section title. If the section is collapsible or nested, only start alignment is supported.
Supported Values:
Value
center
end
start
Default Value:
  • "start"
Names
Item Name
Property legend.referenceObjectSection.titleHalign

legend.reference-object-section.title-style :CSSStyleDeclaration

The CSS style object defining the style of the section title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property legend.referenceObjectSection.titleStyle

legend.rendered :on|off|auto

Defines whether the legend is displayed. If set to auto, the legend will be hidden for charts with a large number of series. To ensure that the legend is always displayed, set this attribute to 'on'. To turn on legend for stock, funnel and pyramid charts, set the displayInLegend property for the series items to 'on'.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property legend.rendered

legend.scrolling :off|asNeeded

Defines whether scrolling is enabled for the legend.
Supported Values:
Value
asNeeded
off
Default Value:
  • "asNeeded"
Names
Item Name
Property legend.scrolling

legend.sections :Array.<oj.ojChart.LegendSection>

An array of objects with the following properties defining the additional legend sections, other than the default series and reference object sections.
Default Value:
  • []
Names
Item Name
Property legend.sections

legend.series-section :Object

An object with the following properties for the series section in the legend.
Names
Item Name
Property legend.seriesSection

legend.series-section.title :string

The title of the series section.
Default Value:
  • null
Names
Item Name
Property legend.seriesSection.title

legend.series-section.title-halign :center|end|start

The horizontal alignment of the section title. If the section is collapsible or nested, only start alignment is supported.
Supported Values:
Value
center
end
start
Default Value:
  • "start"
Names
Item Name
Property legend.seriesSection.titleHalign

legend.series-section.title-style :CSSStyleDeclaration

The CSS style object defining the style of the section title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property legend.seriesSection.titleStyle

legend.size :string

Defines the size of the legend in pixels (e.g. '50px') or percent (e.g. '15%').
Default Value:
  • null
Names
Item Name
Property legend.size

legend.symbol-height :number

The height of the legend symbol (line or marker) in pixels.
Default Value:
  • null
Names
Item Name
Property legend.symbolHeight

legend.symbol-width :number

The width of the legend symbol (line or marker) in pixels.
Default Value:
  • null
Names
Item Name
Property legend.symbolWidth

legend.text-style :CSSStyleDeclaration

The CSS style object defining the style of the legend text. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property legend.textStyle

legend.title :string

The legend title.
Default Value:
  • null
Names
Item Name
Property legend.title

legend.title-halign :center|end|start

The horizontal alignment of the title.
Supported Values:
Value
center
end
start
Default Value:
  • "start"
Names
Item Name
Property legend.titleHalign

legend.title-style :CSSStyleDeclaration

The CSS style object defining the style of the title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property legend.titleStyle

orientation :horizontal|vertical

The chart orientation. Only applies to bar, line, area, combo, box plot, and funnel charts.
Supported Values:
Value
horizontal
vertical
Default Value:
  • "vertical"
Names
Item Name
Property orientation
Property change event orientationChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-orientation-changed

other-threshold :number

Specifies the fraction of the whole pie under which a slice would be aggregated into an "Other" slice. Valid values range from 0 (default) to 1. For example, a value of 0.1 would cause all slices which are less than 10% of the pie to be aggregated into the "Other" slice. Only applies to pie chart.
Default Value:
  • 0
Names
Item Name
Property otherThreshold
Property change event otherThresholdChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-other-threshold-changed

overview :Object

An object defining the overview scrollbar. Only applies if zoomAndScroll is not off. Currently only supported for vertical bar, line, area, stock, and combo charts.
Names
Item Name
Property overview
Property change event overviewChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-overview-changed

overview.content :C

An object containing the property override for the overview chart. The API is the same as the chart property API, and the property provided here will be merged on top of the default property of the overview chart. This can be used to customize the style or the type of the overview chart.
Default Value:
  • {}
Names
Item Name
Property overview.content

overview.height :string

Specifies the height of the overview scrollbar in pixels (e.g. '50px') or percent (e.g. '15%').
Default Value:
  • null
Names
Item Name
Property overview.height

overview.rendered :on|off

Specifies whether the overview scrollbar is rendered. If not, simple scrollbar will be used.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property overview.rendered

pie-center :Object

An object defining the center content of a pie chart. Either a label can be displayed at the center of the pie chart or custom HTML content.
Names
Item Name
Property pieCenter
Property change event pieCenterChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-pie-center-changed

(nullable) pie-center.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label if it is numeric. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property pieCenter.converter

pie-center.label :string

Specifies the text for the label. When a innerRadius is specified, the label will automatically be scaled to fit within the inner circle. If the innerRadius is 0, the default font size will be used.
Default Value:
  • null
Names
Item Name
Property pieCenter.label

pie-center.label-style :CSSStyleDeclaration

The CSS style object defining the style of the label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property pieCenter.labelStyle

pie-center.renderer :((context: ojChart.PieCenterContext) => ({insert: Element|string}|{preventDefault: boolean}))

A function that returns custom center content. The function takes a PieCenterContext argument, provided by the chart, and returns an object with the following properties:
  • insert: HTMLElement | string - HTML content, which will be overlaid on top of the pie chart. The HTML content will block interactivity of the chart by default, but the CSS pointer-events property can be set to 'none' on this content if the chart's interactivity is desired.
  • preventDefault: true - Indicates that the tooltip should not be displayed. It is not necessary to return {preventDefault:false} to display tooltip, since this is a default behavior.
Default Value:
  • null
Names
Item Name
Property pieCenter.renderer

pie-center.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the label if it is numeric. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property pieCenter.scaling

plot-area :Object

An object defining the style of the plot area.
Names
Item Name
Property plotArea
Property change event plotAreaChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-plot-area-changed

plot-area.background-color :string

The color of the plot area background.
Default Value:
  • null
Names
Item Name
Property plotArea.backgroundColor

plot-area.border-color :string

The border color to be set on the chart's plot area.
Default Value:
  • null
Names
Item Name
Property plotArea.borderColor

plot-area.border-width :number

The border width to be set on the chart's plot area.
Default Value:
  • null
Names
Item Name
Property plotArea.borderWidth

plot-area.rendered :off|on

Specifies whether the plot area is rendered.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property plotArea.rendered

polar-grid-shape :polygon|circle

Defines whether the grid shape of the polar chart is circle or polygon. Only applies to polar line and area charts.
Supported Values:
Value
circle
polygon
Default Value:
  • "circle"
Names
Item Name
Property polarGridShape
Property change event polarGridShapeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-polar-grid-shape-changed

selection :Array<K>

An array used to define the ids of the initially selected objects. When the selection is changed, the event.detail of the selectionChanged event will contain the following additional properties:

Name Type Description
selectionData Object an array containing objects describing the selected data items
Properties
Name Type Description
data object the data of the item, if one was specified
itemData object the row data of the item, if one was specified. This will only be set if a DataProvider is used.
groupData Array the group data of the item
seriesData object the series data of the item
endGroup string the end group of a marquee selection on a chart with categorical axis
startGroup string the start group of a marquee selection on a chart with categorical axis
xMax number the maximum x value of a marquee selection
xMin number the minimum x value of a marquee selection
yMax number the maximum y value of a marquee selection
yMin number the minimum y value of a marquee selection
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-changed

selection-mode :none|single|multiple

The type of selection behavior that is enabled on the chart. This attribute controls the number of selections that can be made via selection gestures at any given time.

If single or multiple is specified, selection gestures will be enabled, and the chart's selection styling will be applied to all items specified by the selection attribute. If none is specified, selection gestures will be disabled, and the chart's selection styling will not be applied to any items specified by the selection attribute.

Changing the value of this attribute will not affect the value of the selection attribute.

Supported Values:
Value Description
multiple Multiple items can be selected at the same time.
none Selection is disabled.
single Only a single item can be selected at a time.
Default Value:
  • "none"
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-mode-changed

series :(Array.<oj.ojChart.Series>|Promise.<Array.<oj.ojChart.Series>>|null)

An array of Series objects, used to define series labels and override series styles. Only a single series is supported for stock charts. Also accepts a Promise for deferred data rendering.
Default Value:
  • null
Names
Item Name
Property series
Property change event seriesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-series-changed

(nullable) series-comparator :((context1: ojChart.SeriesTemplateContext<D>, context2: oj.ojChart.SeriesTemplateContext<D>) => number)

A comparator function that determines the ordering of the chart series when using a DataProvider. If undefined, the series will follow the order in which they are found in the data. The series objects will have the same properties as the context for seriesTemplate's $current.
Default Value:
  • null
Names
Item Name
Property seriesComparator
Property change event seriesComparatorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-series-comparator-changed

sorting :ascending|descending|off

Specifies the sorting of the data. It should only be used for pie charts, bar/line/area charts with one series, or stacked bar/area charts. Sorting will not apply when using a hierarchical group axis.
Supported Values:
Value
ascending
descending
off
Default Value:
  • "off"
Names
Item Name
Property sorting
Property change event sortingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-sorting-changed

split-dual-y :on|off|auto

Defines whether the plot area is split into two sections, so that sets of data assigned to the different Y-axes appear in different parts of the plot area. Stock charts do not support "off".
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property splitDualY
Property change event splitDualYChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-split-dual-y-changed

splitter-position :number

In a split dual-Y chart, specifies the fraction of the space that is given to the Y-axis subchart. Valid values are numbers from 0 to 1.
Default Value:
  • 0.5
Names
Item Name
Property splitterPosition
Property change event splitterPositionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-splitter-position-changed

stack :on|off

Defines whether the data items are stacked. Only applies to bar, line, area, and combo charts. Does not apply to range series.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property stack
Property change event stackChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-stack-changed

stack-label :on|off

Defines whether the total values of stacked data items should be displayed. Only applies to bar charts. It can be formatted by the valueFormat of the type 'label'.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property stackLabel
Property change event stackLabelChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-stack-label-changed

style-defaults :Object

An object defining the default styles for series colors, marker shapes, and other style attributes. Properties specified on this object may be overridden by specifications on the data object.
Names
Item Name
Property styleDefaults
Property change event styleDefaultsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-style-defaults-changed

style-defaults.animation-down-color :string

The color of the indicator shown for a decreasing data change animation.
Default Value:
  • null
Names
Item Name
Property styleDefaults.animationDownColor

style-defaults.animation-duration :number

The duration of the animations in milliseconds.
Default Value:
  • null
Names
Item Name
Property styleDefaults.animationDuration

style-defaults.animation-indicators :none|all

Defines whether data change indicators are displayed during animation.
Supported Values:
Value
all
none
Default Value:
  • "all"
Names
Item Name
Property styleDefaults.animationIndicators

style-defaults.animation-up-color :string

The color of the indicator shown for an increasing data change animation.
Default Value:
  • null
Names
Item Name
Property styleDefaults.animationUpColor

style-defaults.bar-gap-ratio :number

Specifies the width of the bar group gap as a ratio of the group width. The valid value is a number from 0 to 1.
Default Value:
  • null
Names
Item Name
Property styleDefaults.barGapRatio

style-defaults.border-color :string

The default border color for the data items. For funnel and pyramid charts, it is used for the slice border.
Default Value:
  • null
Names
Item Name
Property styleDefaults.borderColor

style-defaults.border-width :number

The default border width for the data items. For funnel and pyramid charts, it is used for the slice border.
Default Value:
  • null
Names
Item Name
Property styleDefaults.borderWidth

style-defaults.box-plot :Object

An object containing the style properties of the box plot items.
Names
Item Name
Property styleDefaults.boxPlot

style-defaults.box-plot.median-svg-class-name :string

The CSS style class to apply to the median line.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.boxPlot.medianSvgClassName

style-defaults.box-plot.median-svg-style :CSSStyleDeclaration

The CSS inline style to apply to the median line. Only SVG CSS style properties are supported.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.boxPlot.medianSvgStyle

style-defaults.box-plot.whisker-end-length :string

Specifies the length of the whisker ends in pixels (e.g. '9px') or as a percentage of the box width (e.g. '50%').
Default Value:
  • null
Names
Item Name
Property styleDefaults.boxPlot.whiskerEndLength

style-defaults.box-plot.whisker-end-svg-class-name :string

The CSS style class to apply to the whisker ends.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.boxPlot.whiskerEndSvgClassName

style-defaults.box-plot.whisker-end-svg-style :CSSStyleDeclaration

The CSS inline style to apply to the whisker ends. Only SVG CSS style properties are supported.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.boxPlot.whiskerEndSvgStyle

style-defaults.box-plot.whisker-svg-class-name :string

The CSS style class to apply to the whisker stems.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.boxPlot.whiskerSvgClassName

style-defaults.box-plot.whisker-svg-style :CSSStyleDeclaration

The CSS inline style to apply to the whisker stems. Only SVG CSS style properties are supported.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.boxPlot.whiskerSvgStyle

style-defaults.colors :Array.<string>

The array defining the default color ramp for the series.
Default Value:
  • null
Names
Item Name
Property styleDefaults.colors

style-defaults.data-cursor :Object

An object defining the data cursor style.
Names
Item Name
Property styleDefaults.dataCursor

style-defaults.data-cursor.line-color :string

The color of the data cursor line.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataCursor.lineColor

style-defaults.data-cursor.line-style :dotted|dashed|solid

The line style of the data cursor line.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property styleDefaults.dataCursor.lineStyle

style-defaults.data-cursor.line-width :number

The width of the data cursor line in pixels.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataCursor.lineWidth

style-defaults.data-cursor.marker-color :string

The color of the data cursor marker. Defaults to the data series color.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataCursor.markerColor

style-defaults.data-cursor.marker-displayed :off|on

Whether the data cursor marker is displayed. Marker should only be hidden if the data cursor is displaying information for the entire group.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property styleDefaults.dataCursor.markerDisplayed

style-defaults.data-cursor.marker-size :number

The size of the data cursor marker in pixels.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataCursor.markerSize

style-defaults.data-item-gaps :string

Specifies the presence and size of the gaps between data items, such as bars, markers, and areas. Valid values are a percentage string from 0% to 100%, where 100% produces the maximum supported gaps.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataItemGaps

style-defaults.data-label-collision :fitInBounds|none

Rule for adjusting data label layout. If set to fitInBounds, data label positions will be adjusted if they overlap with the chart's major axes or the legend, or go outside the bounds of the chart's plot area.
Supported Values:
Value
fitInBounds
none
Default Value:
  • "none"
Names
Item Name
Property styleDefaults.dataLabelCollision

style-defaults.data-label-position :center|outsideSlice|aboveMarker|belowMarker|beforeMarker|afterMarker|insideBarEdge|outsideBarEdge|none|auto

The position of the data label. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. The 'outsideSlice' value only applies to pie charts. The 'aboveMarker', 'belowMarker', 'beforeMarker', and 'afterMarker' values only apply to line, area, scatter, and bubble series. The 'insideBarEdge' and 'outsideBarEdge' values only apply to non-polar bar series. Stacked bars do not support 'outsideBarEdge'. The chart does not currently adjust layout to fit labels within the plot area or deal with any overlaps between labels.
Supported Values:
Value
aboveMarker
afterMarker
auto
beforeMarker
belowMarker
center
insideBarEdge
none
outsideBarEdge
outsideSlice
Default Value:
  • "auto"
Names
Item Name
Property styleDefaults.dataLabelPosition

style-defaults.data-label-style :CSSStyleDeclaration|Array<CSSStyleDeclaration>

The CSS style object defining the style of the data label text. For range series, if an array of two values are provided, the first and second value will apply to the low and high point respectively. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataLabelStyle

style-defaults.funnel-background-color :string

The default background color of funnel slices that show actual/target values.
Default Value:
  • null
Names
Item Name
Property styleDefaults.funnelBackgroundColor

style-defaults.group-separators :Object

An object defining the style for hierarchical label separators.
Names
Item Name
Property styleDefaults.groupSeparators

style-defaults.group-separators.color :string

The color of the separators lines.
Default Value:
  • null
Names
Item Name
Property styleDefaults.groupSeparators.color

style-defaults.group-separators.rendered :off|auto

Defines whether the group separators are displayed.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property styleDefaults.groupSeparators.rendered

style-defaults.hover-behavior-delay :number

Specifies initial hover delay in milliseconds for highlighting items in chart.
Default Value:
  • null
Names
Item Name
Property styleDefaults.hoverBehaviorDelay

style-defaults.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
Default Value:
  • "solid"
Names
Item Name
Property styleDefaults.lineStyle

style-defaults.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
Default Value:
  • "auto"
Names
Item Name
Property styleDefaults.lineType

style-defaults.line-width :number

The width of the data line. Only applies to line, lineWithArea, scatter, and bubble series.
Default Value:
  • null
Names
Item Name
Property styleDefaults.lineWidth

style-defaults.marker-color :string

The color of the data markers, if different from the series color.
Default Value:
  • null
Names
Item Name
Property styleDefaults.markerColor

style-defaults.marker-displayed :on|off|auto

Defines whether the data markers should be 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
Default Value:
  • "auto"
Names
Item Name
Property styleDefaults.markerDisplayed

style-defaults.marker-shape :"auto"|"circle"|"diamond"|"human"|"plus"|"square"|"star"|"triangleDown"|"triangleUp"|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.
Default Value:
  • "auto"
Names
Item Name
Property styleDefaults.markerShape

style-defaults.marker-size :number

The size of the data markers in pixels.
Default Value:
  • null
Names
Item Name
Property styleDefaults.markerSize

style-defaults.marquee-border-color :string

The border color of the marquee. Applies to marquee selection and marquee zoom.
Default Value:
  • null
Names
Item Name
Property styleDefaults.marqueeBorderColor

style-defaults.marquee-color :string

The fill color of the marquee. Applies to marquee selection and marquee zoom.
Default Value:
  • null
Names
Item Name
Property styleDefaults.marqueeColor

style-defaults.max-bar-width :number

Specifies the maximum width of each bar in pixels.
Default Value:
  • null
Names
Item Name
Property styleDefaults.maxBarWidth

style-defaults.other-color :string

Specifies the color of the "Other" slice. Only applies to pie chart.
Default Value:
  • null
Names
Item Name
Property styleDefaults.otherColor

style-defaults.patterns :Array.<string>

The array defining the default pattern ramp for the series. This is used only when seriesEffect is 'pattern'.
Default Value:
  • null
Names
Item Name
Property styleDefaults.patterns

style-defaults.pie-feeler-color :string

The color of the line extending from the pie slice to the slice label.
Default Value:
  • null
Names
Item Name
Property styleDefaults.pieFeelerColor

style-defaults.pie-inner-radius :number

Specifies the radius of the inner circle that can be used to create a donut chart. Valid values range from 0 (default) to 1. Not supported if 3D effect is on.
Default Value:
  • 0
Names
Item Name
Property styleDefaults.pieInnerRadius

style-defaults.selection-effect :explode|highlightAndExplode|highlight

The selection effect that is applied to selected items. The values explode and highlightAndExplode only apply to pie charts.
Supported Values:
Value
explode
highlight
highlightAndExplode
Default Value:
  • "highlight"
Names
Item Name
Property styleDefaults.selectionEffect

style-defaults.series-effect :color|pattern|gradient

Defines the fill effect for the data items.
Supported Values:
Value
color
gradient
pattern
Default Value:
  • "color"
Names
Item Name
Property styleDefaults.seriesEffect

style-defaults.shapes :Array.<string>

The array defining the default shape ramp for the series. Valid values are defined in the markerShape attribute.
Default Value:
  • null
Names
Item Name
Property styleDefaults.shapes

style-defaults.stack-label-style :CSSStyleDeclaration

The CSS style object defining the style of the stack label. Only applies to stacked bar charts. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.stackLabelStyle

style-defaults.stock-falling-color :string

In stock charts, the color of the candlestick when the 'open' value is greater than the 'close' value.
Default Value:
  • null
Names
Item Name
Property styleDefaults.stockFallingColor

style-defaults.stock-range-color :string

In stock charts, the color of the range bars for candlestick.
Default Value:
  • null
Names
Item Name
Property styleDefaults.stockRangeColor

style-defaults.stock-rising-color :string

In stock charts, the color of the candlestick when the 'close' value is greater than the 'open' value.
Default Value:
  • null
Names
Item Name
Property styleDefaults.stockRisingColor

style-defaults.stock-volume-color :string

In stock charts, the color of the volume bars. If specified, overrides the default rising and falling colors used by the volume bars.
Default Value:
  • null
Names
Item Name
Property styleDefaults.stockVolumeColor

style-defaults.three-d-effect :on|off

Defines whether the chart is displayed with a 3D effect. Only applies to pie, funnel and pyramid charts.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property styleDefaults.threeDEffect

style-defaults.tooltip-label-style :CSSStyleDeclaration

The CSS style object defining the style of the labels in the tooltip. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.tooltipLabelStyle

style-defaults.tooltip-value-style :CSSStyleDeclaration

The CSS style object defining the style of the values in the tooltip. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.tooltipValueStyle

time-axis-type :enabled|mixedFrequency|skipGaps|disabled|auto

The type of time axis to display in the chart. Time axis is only supported for Cartesian bar, line, area, stock, box plot, and combo charts. If the value is "enabled" or "skipGaps", the time values must be provided through the "group-id" attribute of the oj-chart-item element. In this case stacking is supported. If the value is "skipGaps", the groups will be rendered at a regular interval regardless of any time gaps that may exist in the data. If the value is "mixedFrequency", the time values must be provided through the "x" attribute of the oj-chart-item element. In this case stacking is not supported.
Supported Values:
Value
auto
disabled
enabled
mixedFrequency
skipGaps
Default Value:
  • "auto"
Names
Item Name
Property timeAxisType
Property change event timeAxisTypeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-time-axis-type-changed

tooltip :Object

An object containing an optional callback function for tooltip customization.
Names
Item Name
Property tooltip
Property change event tooltipChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-tooltip-changed

(nullable) tooltip.renderer :((context: ojChart.TooltipContext<K, D, I>) => ({insert: Element|string}|{preventDefault: boolean}))

A function that returns a custom tooltip for chart. The function takes a TooltipContext argument, provided by the chart, and returns an object with the following properties:
  • insert: HTMLElement | string - An HTML element, which will be appended to the tooltip, or a tooltip string.
  • preventDefault: true - Indicates that the tooltip should not be displayed. It is not necessary to return {preventDefault:false} to display tooltip, since this is a default behavior.
Default Value:
  • null
Names
Item Name
Property tooltip.renderer

touch-response :touchStart|auto

Data visualizations require a press and hold delay before triggering tooltips, marquee selection, and rollover effects on mobile devices to avoid interfering with page panning, but these hold delays can make applications seem slower and less responsive. For a better user experience, the application can remove the touch and hold delay when data visualizations are used within a non scrolling container or if there is sufficient space outside of the visualization for panning. If touchResponse is touchStart the element will instantly trigger the touch gesture and consume the page pan events if the element does not require an internal feature that requires a touch start gesture like panning, zooming, or when marquee selection is initiated. If touchResponse is auto, the element will behave like touchStart if it determines that it is not rendered within scrolling content and if panning is not available for those elements that support the feature.
Supported Values:
Value
auto
touchStart
Default Value:
  • "auto"
Names
Item Name
Property touchResponse
Property change event touchResponseChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-touch-response-changed

track-resize :on|off

Defines whether the element will automatically render in response to changes in size. If set to off, then the application is responsible for calling refresh to render the element at the new size.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-track-resize-changed

translations :object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed

(nullable) translations.component-name :string

Used to describe the data visualization type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Chart"
Names
Item Name
Property translations.componentName

(nullable) translations.label-and-value :string

Used to display a label and its value.

See the translations attribute for usage examples.

Default Value:
  • "{0}: {1}"
Names
Item Name
Property translations.labelAndValue

(nullable) translations.label-clear-selection :string

Text shown for clearing multiple selection on touch devices.

See the translations attribute for usage examples.

Default Value:
  • "Clear Selection"
Names
Item Name
Property translations.labelClearSelection

(nullable) translations.label-close :string

Used for the close value in the tooltip for stock data.

See the translations attribute for usage examples.

Default Value:
  • "Close"
Names
Item Name
Property translations.labelClose

(nullable) translations.label-count-with-total :string

Used to display a count out of a total.

See the translations attribute for usage examples.

Default Value:
  • "{0} of {1}"
Names
Item Name
Property translations.labelCountWithTotal

(nullable) translations.label-data-visualization :string

Label for data visualizations used for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Data Visualization"
Names
Item Name
Property translations.labelDataVisualization

(nullable) translations.label-date :string

Used for the date value in the tooltip, if a time axis is being used.

See the translations attribute for usage examples.

Default Value:
  • "Value"
Names
Item Name
Property translations.labelDate

(nullable) translations.label-default-group-name :string

Used when the group names are not specified.

See the translations attribute for usage examples.

Default Value:
  • "Group {0}"
Names
Item Name
Property translations.labelDefaultGroupName

(nullable) translations.label-group :string

Used for the default tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Group"
Names
Item Name
Property translations.labelGroup

(nullable) translations.label-high :string

>Used for the high value in the tooltip for stock and range data.

See the translations attribute for usage examples.

Default Value:
  • "High"
Names
Item Name
Property translations.labelHigh

(nullable) translations.label-invalid-data :string

Text shown when the component receives invalid data.

See the translations attribute for usage examples.

Default Value:
  • "Invalid data"
Names
Item Name
Property translations.labelInvalidData

(nullable) translations.label-low :string

Used for the low value in the tooltip for stock and range data.

See the translations attribute for usage examples.

Default Value:
  • "Low"
Names
Item Name
Property translations.labelLow

(nullable) translations.label-no-data :string

Text shown when the component receives no data.

See the translations attribute for usage examples.

Default Value:
  • "No data to display"
Names
Item Name
Property translations.labelNoData

(nullable) translations.label-open :string

Used for the open value in the tooltip for stock data.

See the translations attribute for usage examples.

Default Value:
  • "Open"
Names
Item Name
Property translations.labelOpen

(nullable) translations.label-other :string

Used for the other series label which aggregates small data values.

See the translations attribute for usage examples.

Default Value:
  • "Other"
Names
Item Name
Property translations.labelOther

(nullable) translations.label-percentage :string

Used for displaying the percentage in the tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Percentage"
Names
Item Name
Property translations.labelPercentage

(nullable) translations.label-q1 :string

Used for displaying the first quartile for box plots.

See the translations attribute for usage examples.

Default Value:
  • "Q1"
Names
Item Name
Property translations.labelQ1

(nullable) translations.label-q2 :string

Used for displaying the second quartile (i.e. median) for box plots.

See the translations attribute for usage examples.

Default Value:
  • "Q2"
Names
Item Name
Property translations.labelQ2

(nullable) translations.label-q3 :string

Used for displaying the third quartile for box plots.

See the translations attribute for usage examples.

Default Value:
  • "Q3"
Names
Item Name
Property translations.labelQ3

(nullable) translations.label-series :string

Used for the default tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Series"
Names
Item Name
Property translations.labelSeries

(nullable) translations.label-target-value :string

Used for the funnel chart target value.

See the translations attribute for usage examples.

Default Value:
  • "Target"
Names
Item Name
Property translations.labelTargetValue

(nullable) translations.label-value :string

Used for the data item value in the tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Value"
Names
Item Name
Property translations.labelValue

(nullable) translations.label-volume :string

Used for the volume value in the tooltip for stock data.

See the translations attribute for usage examples.

Default Value:
  • "Volume"
Names
Item Name
Property translations.labelVolume

(nullable) translations.label-x :string

Used for the x value in the tooltip.

See the translations attribute for usage examples.

Default Value:
  • "X"
Names
Item Name
Property translations.labelX

(nullable) translations.label-y :string

Used for the y value in the tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Y"
Names
Item Name
Property translations.labelY

(nullable) translations.label-z :string

Used for the z value in the tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Z"
Names
Item Name
Property translations.labelZ

(nullable) translations.state-collapsed :string

Used to describe the collapsed state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Collapsed"
Names
Item Name
Property translations.stateCollapsed

(nullable) translations.state-drillable :string

Used to describe a drillable object for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Drillable"
Names
Item Name
Property translations.stateDrillable

(nullable) translations.state-expanded :string

Used to describe the expanded state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Expanded"
Names
Item Name
Property translations.stateExpanded

(nullable) translations.state-hidden :string

Used to describe the hidden state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Hidden"
Names
Item Name
Property translations.stateHidden

(nullable) translations.state-isolated :string

Used to describe the isolated state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Isolated"
Names
Item Name
Property translations.stateIsolated

(nullable) translations.state-maximized :string

Used to describe the maximized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Maximized"
Names
Item Name
Property translations.stateMaximized

(nullable) translations.state-minimized :string

Used to describe the minimized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Minimized"
Names
Item Name
Property translations.stateMinimized

(nullable) translations.state-selected :string

Used to describe the selected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Selected"
Names
Item Name
Property translations.stateSelected

(nullable) translations.state-unselected :string

Used to describe the unselected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Unselected"
Names
Item Name
Property translations.stateUnselected

(nullable) translations.state-visible :string

Used to describe the visible state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Visible"
Names
Item Name
Property translations.stateVisible

(nullable) translations.tooltip-pan :string

Used for the pan tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Pan"
Names
Item Name
Property translations.tooltipPan

(nullable) translations.tooltip-select :string

Used for the marquee select tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Marquee select"
Names
Item Name
Property translations.tooltipSelect

(nullable) translations.tooltip-zoom :string

Used for the marquee zoom tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Marquee zoom"
Names
Item Name
Property translations.tooltipZoom

type :line|area|lineWithArea|stock|boxPlot|combo|pie|scatter|bubble|funnel|pyramid|bar

The chart type. By default, the first three series of "combo" chart are assigned 'bar', 'line', and 'area' type respectively and then the type repeats, i.e sucessive series will be of types 'bar', 'line', and 'area' and so on. To customize individual series, see oj-chart-series for more details.
Supported Values:
Value
area
bar
boxPlot
bubble
combo
funnel
line
lineWithArea
pie
pyramid
scatter
stock
Default Value:
  • "bar"
Names
Item Name
Property type
Property change event typeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-type-changed

value-formats :Object

An object specifying value formatting and tooltip behavior, whose keys generally correspond to the attribute names on the data items.
Names
Item Name
Property valueFormats
Property change event valueFormatsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-value-formats-changed

value-formats.close :Object

Specifies the value formatting and tooltip behavior for the close values of a stock chart.
Names
Item Name
Property valueFormats.close

(nullable) value-formats.close.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.close.converter

value-formats.close.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.close.scaling

value-formats.close.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.close.tooltipDisplay

value-formats.close.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.close.tooltipLabel

value-formats.group :Object

Specifies tooltip behavior for the groups.
Names
Item Name
Property valueFormats.group

value-formats.group.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.group.tooltipDisplay

value-formats.group.tooltip-label :string|Array.<string>

A string representing the label that is displayed before the value in the tooltip. This value can also take an array of strings to be applied to hierarchical group names, from outermost to innermost.
Default Value:
  • null
Names
Item Name
Property valueFormats.group.tooltipLabel

value-formats.high :Object

Specifies the value formatting and tooltip behavior for the high values.
Names
Item Name
Property valueFormats.high

(nullable) value-formats.high.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.high.converter

value-formats.high.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.high.scaling

value-formats.high.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.high.tooltipDisplay

value-formats.high.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.high.tooltipLabel

value-formats.label :Object

Specifies the value formatting for the data item labels.
Names
Item Name
Property valueFormats.label

(nullable) value-formats.label.converter :(Converter<string>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.label.converter

value-formats.label.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.label.scaling

value-formats.low :Object

Specifies the value formatting and tooltip behavior for the low values.
Names
Item Name
Property valueFormats.low

(nullable) value-formats.low.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.low.converter

value-formats.low.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.low.scaling

value-formats.low.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.low.tooltipDisplay

value-formats.low.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.low.tooltipLabel

value-formats.open :Object

Specifies the value formatting and tooltip behavior for the open values of a stock chart.
Names
Item Name
Property valueFormats.open

(nullable) value-formats.open.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.open.converter

value-formats.open.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.open.scaling

value-formats.open.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.open.tooltipDisplay

value-formats.open.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.open.tooltipLabel

value-formats.q1 :Object

Specifies the value formatting and tooltip behavior for the q1 values of a box plot.
Names
Item Name
Property valueFormats.q1

(nullable) value-formats.q1.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.q1.converter

value-formats.q1.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.q1.scaling

value-formats.q1.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.q1.tooltipDisplay

value-formats.q1.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.q1.tooltipLabel

value-formats.q2 :Object

Specifies the value formatting and tooltip behavior for the q2 values of a box plot.
Names
Item Name
Property valueFormats.q2

(nullable) value-formats.q2.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.q2.converter

value-formats.q2.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.q2.scaling

value-formats.q2.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.q2.tooltipDisplay

value-formats.q2.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.q2.tooltipLabel

value-formats.q3 :Object

Specifies the value formatting and tooltip behavior for the q3 values of a box plot.
Names
Item Name
Property valueFormats.q3

(nullable) value-formats.q3.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.q3.converter

value-formats.q3.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.q3.scaling

value-formats.q3.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.q3.tooltipDisplay

value-formats.q3.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.q3.tooltipLabel

value-formats.series :Object

Specifies tooltip behavior for the series.
Names
Item Name
Property valueFormats.series

value-formats.series.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.series.tooltipDisplay

value-formats.series.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.series.tooltipLabel

value-formats.target-value :Object

Specifies the value formatting and tooltip behavior for the target values of a funnel chart.
Names
Item Name
Property valueFormats.targetValue

(nullable) value-formats.target-value.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.targetValue.converter

value-formats.target-value.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.targetValue.scaling

value-formats.target-value.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.targetValue.tooltipDisplay

value-formats.target-value.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.targetValue.tooltipLabel

value-formats.value :Object

Specifies the value formatting and tooltip behavior for the values.
Names
Item Name
Property valueFormats.value

(nullable) value-formats.value.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.value.converter

value-formats.value.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.value.scaling

value-formats.value.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.value.tooltipDisplay

value-formats.value.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.value.tooltipLabel

value-formats.volume :Object

Specifies the value formatting and tooltip behavior for the volume values of a stock chart.
Names
Item Name
Property valueFormats.volume

(nullable) value-formats.volume.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.volume.converter

value-formats.volume.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.volume.scaling

value-formats.volume.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.volume.tooltipDisplay

value-formats.volume.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.volume.tooltipLabel

value-formats.x :Object

Specifies the value formatting and tooltip behavior for the x values.
Names
Item Name
Property valueFormats.x

(nullable) value-formats.x.converter :(oj.Converter.<(string|number)>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.x.converter

value-formats.x.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.x.scaling

value-formats.x.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.x.tooltipDisplay

value-formats.x.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.x.tooltipLabel

value-formats.y :Object

Specifies the value formatting and tooltip behavior for the y values.
Names
Item Name
Property valueFormats.y

(nullable) value-formats.y.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.y.converter

value-formats.y.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.y.scaling

value-formats.y.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.y.tooltipDisplay

value-formats.y.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.y.tooltipLabel

value-formats.y2 :Object

Specifies the value formatting and tooltip behavior for the y2 values.
Names
Item Name
Property valueFormats.y2

(nullable) value-formats.y2.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.y2.converter

value-formats.y2.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.y2.scaling

value-formats.y2.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.y2.tooltipDisplay

value-formats.y2.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.y2.tooltipLabel

value-formats.z :Object

Specifies the value formatting and tooltip behavior for the z values.
Names
Item Name
Property valueFormats.z

(nullable) value-formats.z.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the label. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property valueFormats.z.converter

value-formats.z.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the value. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.z.scaling

value-formats.z.tooltip-display :off|auto

Whether the value is displayed in the tooltip.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.z.tooltipDisplay

value-formats.z.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip.
Default Value:
  • null
Names
Item Name
Property valueFormats.z.tooltipLabel

x-axis :Object

An object defining properties for the axis, tick marks, tick labels, and axis titles.
Names
Item Name
Property xAxis
Property change event xAxisChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-x-axis-changed

x-axis.axis-line :Object

An object defining properties for the axis line.
Names
Item Name
Property xAxis.axisLine

x-axis.axis-line.line-color :string

The color of the axis line.
Default Value:
  • null
Names
Item Name
Property xAxis.axisLine.lineColor

x-axis.axis-line.line-width :number

The width of the axis line.
Default Value:
  • null
Names
Item Name
Property xAxis.axisLine.lineWidth

x-axis.axis-line.rendered :off|on

Defines whether the axis line is rendered.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property xAxis.axisLine.rendered

x-axis.baseline-scaling :min|zero

Defines whether the axis baseline starts at the minimum value of the data or at zero. Only applies to numerical data axes.
Supported Values:
Value
min
zero
Default Value:
  • "zero"
Names
Item Name
Property xAxis.baselineScaling

x-axis.data-max :number

The maximum data value corresponding to an axis. If specified, the automatic axis extent calculation will use this value. Only applies to numerical axes.
Default Value:
  • null
Names
Item Name
Property xAxis.dataMax

x-axis.data-min :number

The minimum data value corresponding to an axis. If specified, the automatic axis extent calculation will use this value. Only applies to numerical axes.
Default Value:
  • null
Names
Item Name
Property xAxis.dataMin

x-axis.major-tick :Object

An object defining properties for the major tick marks.
Names
Item Name
Property xAxis.majorTick

x-axis.major-tick.baseline-color :inherit|auto

The color of the major tick mark at the baseline (x = 0). Valid values are auto, inherit, or a custom color. If set to inherit, it will follow the lineColor attribute.
Supported Values:
Value
auto
inherit
Default Value:
  • "auto"
Names
Item Name
Property xAxis.majorTick.baselineColor

x-axis.major-tick.baseline-style :dotted|dashed|solid

The line style of the major tick mark at the baseline (x = 0). If not specified, it will follow the lineStyle attribute.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property xAxis.majorTick.baselineStyle

x-axis.major-tick.baseline-width :number

The width of the major tick mark at the baseline (x = 0) If not specified, it will follow the lineWidth attribute.
Default Value:
  • null
Names
Item Name
Property xAxis.majorTick.baselineWidth

x-axis.major-tick.line-color :string

The color of the major tick marks.
Default Value:
  • null
Names
Item Name
Property xAxis.majorTick.lineColor

x-axis.major-tick.line-style :dotted|dashed|solid

The line style of the major tick marks.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property xAxis.majorTick.lineStyle

x-axis.major-tick.line-width :number

The width of the major tick marks.
Default Value:
  • null
Names
Item Name
Property xAxis.majorTick.lineWidth

x-axis.major-tick.rendered :on|off|auto

Defines whether the major tick marks are rendered.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property xAxis.majorTick.rendered

x-axis.max :number|string

The maximum value of the axis. Defaults to null for automatic calculation based on the data. For categorical axes, the value represents the group index. For example, 0 is the position of the first group, and 1.5 is the position half way between the second and the third group.
Default Value:
  • null
Names
Item Name
Property xAxis.max

x-axis.max-size :string

Defines the maximum size of the axis in pixels (e.g. '50px') or percent (e.g. '15%').
Default Value:
  • null
Names
Item Name
Property xAxis.maxSize

x-axis.min :number|string

The minimum value of the axis. Defaults to null for automatic calculation based on the data. For categorical axes, the value represents the group index. For example, 0 is the position of the first group, and 1.5 is the position half way between the second and the third group.
Default Value:
  • null
Names
Item Name
Property xAxis.min

x-axis.min-step :number

The minimum increment between major tick marks. This is typically used to prevent fractional axis values for discrete measures. Only applies to numerical axes.
Default Value:
  • null
Names
Item Name
Property xAxis.minStep

x-axis.minor-step :number

The increment between minor tick marks. Defaults to null for automatic calculation based on the data. Only applies to numerical axes. For log axis, the step is a multiplier, so for example, if the minorStep is 2, the minor tick marks will be rendered at 1, 2, 4, 8, and so on.
Default Value:
  • null
Names
Item Name
Property xAxis.minorStep

x-axis.minor-tick :Object

An object defining properties for the minor tick marks.
Names
Item Name
Property xAxis.minorTick

x-axis.minor-tick.line-color :string

The color of the minor tick marks.
Default Value:
  • null
Names
Item Name
Property xAxis.minorTick.lineColor

x-axis.minor-tick.line-style :dotted|dashed|solid

The line style of the minor tick marks.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property xAxis.minorTick.lineStyle

x-axis.minor-tick.line-width :number

The width of the minor tick marks.
Default Value:
  • null
Names
Item Name
Property xAxis.minorTick.lineWidth

x-axis.minor-tick.rendered :on|off|auto

Defines whether the minor tick marks are rendered.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property xAxis.minorTick.rendered

x-axis.reference-objects :Array.<Object>

The array of reference objects associated with the axis.
Default Value:
  • []
Names
Item Name
Property xAxis.referenceObjects

xAxis.referenceObjects[].categories :Array.<string>

An optional array of category strings corresponding to this reference object. This allows highlighting and filtering of a reference object through interactions with legend sections. If not defined, the reference object id is used.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].color :string

The color of the reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].displayInLegend :on|off

Defines whether the reference object should be shown in the legend.
Supported Values:
Value
off
on
Default Value:
  • "off"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].high :number|string

The high value of an area reference object. For categorical axes, the value represents the group id(string) or group index(number). For example, when using group indices, 0 is the position of the first group, and 1.5 is the position half way between the second and the third group. See xAxis.referenceObjects[].type for more details.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].id :string

The id of the reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].lineStyle :dotted|dashed|solid

The line style of the line reference object. Does not apply to area reference objects.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].lineWidth :number

The width of the line reference object. Does not apply to area reference objects.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].location :front|back

The location of the reference object relative to the data items.
Supported Values:
Value
back
front
Default Value:
  • "back"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].low :number|string

The low value of an area reference object. For categorical axes, the value represents the group id(string) or group index(number). For example, when using group indices, 0 is the position of the first group, and 1.5 is the position half way between the second and the third group. See xAxis.referenceObjects[].type for more details.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].shortDesc :string

The description of this object. This is used for accessibility and also for customizing the tooltip text.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].svgClassName :string

The CSS style class to apply to the reference object. 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 reference object color attribute.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].svgStyle :CSSStyleDeclaration

The CSS inline style to apply to the reference object. 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 reference object color attribute. Only SVG CSS style properties are supported.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].text :string

The text displayed in the legend for the reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].type :area|line

The type of reference object being shown. If the value is set to "area", use the low and high properties of the reference object. Otherwise, use the value property.
Supported Values:
Value
area
line
Default Value:
  • "line"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

xAxis.referenceObjects[].value :number|string

The value of a line reference object. This property defines a constant value across the entire reference object. For categorical axes, the value represents the group id(string) or group index(number). For example, when using group indices, 0 is the position of the first group, and 1.5 is the position half way between the second and the third group. See xAxis.referenceObjects[].type for more details.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

x-axis.rendered :off|on

Defines whether the axis is rendered.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property xAxis.rendered

x-axis.scale :log|linear

Defines the axis scale. Only applies to numerical axes.
Supported Values:
Value
linear
log
Default Value:
  • "linear"
Names
Item Name
Property xAxis.scale

x-axis.size :string

Defines the size of the axis in pixels (e.g. '50px') or percent (e.g. '15%').
Default Value:
  • null
Names
Item Name
Property xAxis.size

x-axis.step :number

The increment between major tick marks. Defaults to null for automatic calculation based on the data. Only applies to time and numerical axes. For log axis, the step is a multiplier, so for example, if the step is 2, the major tick marks will be rendered at 1, 2, 4, 8, and so on.
Default Value:
  • null
Names
Item Name
Property xAxis.step

x-axis.tick-label :Object

An object defining the properties of the tick labels.
Names
Item Name
Property xAxis.tickLabel

(nullable) x-axis.tick-label.converter :(oj.Converter.<(string|number)>)

The converter (an instance that duck types oj.Converter) used to format the labels. When using a time axis, this attribute also takes an array of two converters, which apply respectively to the first and second label levels. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property xAxis.tickLabel.converter

x-axis.tick-label.rendered :off|on

Defines whether the tick labels are rendered.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property xAxis.tickLabel.rendered

x-axis.tick-label.rotation :none|auto

Defines whether the chart will automatically rotate the labels by 90 degrees in order to fit more labels on the axis. The rotation will only be applied to categorical labels for a horizontal axis.
Supported Values:
Value
auto
none
Default Value:
  • "auto"
Names
Item Name
Property xAxis.tickLabel.rotation

x-axis.tick-label.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the labels. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property xAxis.tickLabel.scaling

x-axis.tick-label.style :CSSStyleDeclaration

The CSS style object defining the style of the labels. The CSS white-space property can be defined with value "nowrap" to disable default text wrapping of categorical labels. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property xAxis.tickLabel.style

x-axis.title :string

The axis title. Does not apply to polar charts.
Default Value:
  • null
Names
Item Name
Property xAxis.title

x-axis.title-style :CSSStyleDeclaration

The CSS style object defining the style of the axis title. The CSS white-space property can be defined with value "nowrap" to disable default text wrapping of the title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property xAxis.titleStyle

x-axis.viewport-end-group :number|string

Specifies the end group of the current viewport. Only applies to charts with group or time axis. If not specified, the default end group is the last group in the data set.
Default Value:
  • null
Names
Item Name
Property xAxis.viewportEndGroup

x-axis.viewport-max :number|string

Specifies the maximum x coordinate of the current viewport for zoom and scroll. For group axis, the group index will be treated as the axis coordinate. If both viewportEndGroup and viewportMax are specified, then viewportMax takes precedence. If not specified, this value will be the axis max.
Default Value:
  • null
Names
Item Name
Property xAxis.viewportMax

x-axis.viewport-min :number|string

Specifies the minimum x coordinate of the current viewport for zoom and scroll. For group axis, the group index will be treated as the axis coordinate. If both viewportStartGroup and viewportMin are specified, then viewportMin takes precedence. If not specified, this value will be the axis min.
Default Value:
  • null
Names
Item Name
Property xAxis.viewportMin

x-axis.viewport-start-group :number|string

Specifies the start group of the current viewport. Only applies to charts with group or time axis. If not specified, the default start group is the first group in the data set.
Default Value:
  • null
Names
Item Name
Property xAxis.viewportStartGroup

y2-axis :Object

An object defining properties for the axis, tick marks, tick labels, and axis titles. Y2 axis is only supported for Cartesian bar, line, area, and combo charts.
Names
Item Name
Property y2Axis
Property change event y2AxisChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-y2-axis-changed

y2-axis.align-tick-marks :off|on

Defines whether the tick marks of the y1 and y2 axes are aligned. Not supported for logarithmic axes.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property y2Axis.alignTickMarks

y2-axis.axis-line :Object

An object defining properties for the axis line.
Names
Item Name
Property y2Axis.axisLine

y2-axis.axis-line.line-color :string

The color of the axis line.
Default Value:
  • null
Names
Item Name
Property y2Axis.axisLine.lineColor

y2-axis.axis-line.line-width :number

The width of the axis line.
Default Value:
  • null
Names
Item Name
Property y2Axis.axisLine.lineWidth

y2-axis.axis-line.rendered :on|off|auto

Defines whether the axis line is rendered.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property y2Axis.axisLine.rendered

y2-axis.baseline-scaling :min|zero

Defines whether the axis baseline starts at the minimum value of the data or at zero. Only applies to numerical data axes.
Supported Values:
Value
min
zero
Default Value:
  • "zero"
Names
Item Name
Property y2Axis.baselineScaling

y2-axis.data-max :number

The maximum data value corresponding to an axis. If specified, the automatic axis extent calculation will use this value.
Default Value:
  • null
Names
Item Name
Property y2Axis.dataMax

y2-axis.data-min :number

The minimum data value corresponding to an axis. If specified, the automatic axis extent calculation will use this value.
Default Value:
  • null
Names
Item Name
Property y2Axis.dataMin

y2-axis.major-tick :Object

An object defining properties for the major tick marks.
Names
Item Name
Property y2Axis.majorTick

y2-axis.major-tick.baseline-color :inherit|auto

The color of the major tick mark at the baseline (y = 0). Valid values are auto, inherit, or a custom color. If set to inherit, it will follow the lineColor attribute.
Supported Values:
Value
auto
inherit
Default Value:
  • "auto"
Names
Item Name
Property y2Axis.majorTick.baselineColor

y2-axis.major-tick.baseline-style :dotted|dashed|solid

The line style of the major tick mark at the baseline (y = 0). If not specified, it will follow the lineStyle attribute.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property y2Axis.majorTick.baselineStyle

y2-axis.major-tick.baseline-width :number

The width of the major tick mark at the baseline (y = 0) If not specified, it will follow the lineWidth attribute.
Default Value:
  • null
Names
Item Name
Property y2Axis.majorTick.baselineWidth

y2-axis.major-tick.line-color :string

The color of the major tick marks.
Default Value:
  • null
Names
Item Name
Property y2Axis.majorTick.lineColor

y2-axis.major-tick.line-style :dotted|dashed|solid

The line style of the major tick marks.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property y2Axis.majorTick.lineStyle

y2-axis.major-tick.line-width :number

The width of the major tick marks.
Default Value:
  • null
Names
Item Name
Property y2Axis.majorTick.lineWidth

y2-axis.major-tick.rendered :on|off|auto

Defines whether the major tick marks are rendered.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property y2Axis.majorTick.rendered

y2-axis.max :number

The maximum value of the axis. Defaults to null for automatic calculation based on the data.
Default Value:
  • null
Names
Item Name
Property y2Axis.max

y2-axis.max-size :string

Defines the maximum size of the axis in pixels (e.g. '50px') or percent (e.g. '15%').
Default Value:
  • null
Names
Item Name
Property y2Axis.maxSize

y2-axis.min :number

The minimum value of the axis. Defaults to null for automatic calculation based on the data.
Default Value:
  • null
Names
Item Name
Property y2Axis.min

y2-axis.min-step :number

The minimum increment between major tick marks. This is typically used to prevent fractional axis values for discrete measures.
Default Value:
  • null
Names
Item Name
Property y2Axis.minStep

y2-axis.minor-step :number

The increment between minor tick marks. Defaults to null for automatic calculation based on the data. For log axis, the step is a multiplier, so for example, if the minorStep is 2, the minor tick marks will be rendered at 1, 2, 4, 8, and so on.
Default Value:
  • null
Names
Item Name
Property y2Axis.minorStep

y2-axis.minor-tick :Object

An object defining properties for the minor tick marks.
Names
Item Name
Property y2Axis.minorTick

y2-axis.minor-tick.line-color :string

The color of the minor tick marks.
Default Value:
  • null
Names
Item Name
Property y2Axis.minorTick.lineColor

y2-axis.minor-tick.line-style :dotted|dashed|solid

The line style of the minor tick marks.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property y2Axis.minorTick.lineStyle

y2-axis.minor-tick.line-width :number

The width of the minor tick marks.
Default Value:
  • null
Names
Item Name
Property y2Axis.minorTick.lineWidth

y2-axis.minor-tick.rendered :on|off|auto

Defines whether the minor tick marks are rendered.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property y2Axis.minorTick.rendered

y2-axis.position :start|end|top|bottom|auto

The position of the axis relative to its content. For vertical charts, only start and end apply. For horizontal charts, only top and bottom apply.
Supported Values:
Value
auto
bottom
end
start
top
Default Value:
  • "auto"
Names
Item Name
Property y2Axis.position

y2-axis.reference-objects :Array.<Object>

The array of reference objects associated with the axis.
Default Value:
  • []
Names
Item Name
Property y2Axis.referenceObjects

y2Axis.referenceObjects[].categories :Array.<string>

An optional array of category strings corresponding to this reference object. This allows highlighting and filtering of a reference object through interactions with legend sections. If not defined, the reference object id is used.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].color :string

The color of the reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].displayInLegend :on|off

Defines whether the reference object should be shown in the legend.
Supported Values:
Value
off
on
Default Value:
  • "off"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].high :number

The high value of an area reference object. This property defines a constant value across the entire reference area and is ignored if the items property is specified. See y2Axis.referenceObjects[].type for more details.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].id :string

The id of the reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].items :Array.<Object>|Array.<number>

An array of values or an array of objects with the following properties that define the data for a varying reference object. Only supported for y1 and y2 axes for all chart types.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].items[].high :number

The high value of this point of a varying area reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].items[].low :number

The low value of this point of a varying area reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].items[].value :number

The value of this point of a varying line reference object. Null can be specified to skip a data point.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].items[].x :number|string

The x value of this point. Mainly used for scatter and bubble charts, and to specify the date for mixed-frequency time axis. For categorical axis, if the x value is not specified, it will default to the item index. For regular time axis, if the x value is not specified, it will default to the group name of the item.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].lineStyle :dotted|dashed|solid

The line style of the line reference object. Does not apply to area reference objects.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].lineType :curved|stepped|centeredStepped|segmented|centeredSegmented|straight

The line type of the varying reference object. "centeredStepped" and "centeredSegmented" are not supported for polar, scatter, and bubble charts. See y2Axis.referenceObjects[].items for more details about varying reference objects.
Supported Values:
Value
centeredSegmented
centeredStepped
curved
segmented
stepped
straight
Default Value:
  • "straight"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].lineWidth :number

The width of the line reference object. Does not apply to area reference objects.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].location :front|back

The location of the reference object relative to the data items.
Supported Values:
Value
back
front
Default Value:
  • "back"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].low :number

The low value of an area reference object. This property defines a constant value across the entire reference area and is ignored if the items property is specified. See y2Axis.referenceObjects[].type for more details.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].shortDesc :string

The description of this object. This is used for accessibility and also for customizing the tooltip text.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].svgClassName :string

The CSS style class to apply to the reference object. 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 reference object color attribute.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].svgStyle :CSSStyleDeclaration

The CSS inline style to apply to the reference object. 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 reference object color attribute. Only SVG CSS style properties are supported.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].text :string

The text displayed in the legend for the reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].type :area|line

The type of reference object being shown. If the value is set to "area", use the low and high properties of the reference object. Otherwise, use the value property. See y2Axis.referenceObjects[].items for how to create a varying reference object.
Supported Values:
Value
area
line
Default Value:
  • "line"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2Axis.referenceObjects[].value :number

The value of a line reference object. This property defines a constant value across the entire reference line and is ignored if the items property is specified. See y2Axis.referenceObjects[].type for more details.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y2-axis.rendered :off|on

Defines whether the axis is rendered.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property y2Axis.rendered

y2-axis.scale :log|linear

Defines the axis scale. Only applies to numerical axes.
Supported Values:
Value
linear
log
Default Value:
  • "linear"
Names
Item Name
Property y2Axis.scale

y2-axis.size :string

Defines the size of the axis in pixels (e.g. '50px') or percent (e.g. '15%').
Default Value:
  • null
Names
Item Name
Property y2Axis.size

y2-axis.step :number

The increment between major tick marks. Defaults to null for automatic calculation based on the data. For log axis, the step is a multiplier, so for example, if the step is 2, the major tick marks will be rendered at 1, 2, 4, 8, and so on.
Default Value:
  • null
Names
Item Name
Property y2Axis.step

y2-axis.tick-label :Object

An object defining the properties of the tick labels.
Names
Item Name
Property y2Axis.tickLabel

(nullable) y2-axis.tick-label.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the labels. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property y2Axis.tickLabel.converter

y2-axis.tick-label.position :inside|outside

Defines the position of the tick labels relative to the plot area.
Supported Values:
Value
inside
outside
Default Value:
  • "outside"
Names
Item Name
Property y2Axis.tickLabel.position

y2-axis.tick-label.rendered :off|on

Defines whether the tick labels are rendered.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property y2Axis.tickLabel.rendered

y2-axis.tick-label.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the labels. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property y2Axis.tickLabel.scaling

y2-axis.tick-label.style :CSSStyleDeclaration

The CSS style object defining the style of the labels. The following style properties are supported: backgroundColor, color, cursor, fontFamily, fontSize, fontStyle, fontWeight, maxWidth, textDecoration.
Default Value:
  • {}
Names
Item Name
Property y2Axis.tickLabel.style

y2-axis.title :string

The axis title.
Default Value:
  • null
Names
Item Name
Property y2Axis.title

y2-axis.title-style :CSSStyleDeclaration

The CSS style object defining the style of the axis title. The CSS white-space property can be defined with value "nowrap" to disable default text wrapping of the title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, maxWidth, textDecoration.
Default Value:
  • {}
Names
Item Name
Property y2Axis.titleStyle

y-axis :Object

An object defining properties for the axis, tick marks, tick labels, and axis titles.
Names
Item Name
Property yAxis
Property change event yAxisChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-y-axis-changed

y-axis.axis-line :Object

An object defining properties for the axis line.
Names
Item Name
Property yAxis.axisLine

y-axis.axis-line.line-color :string

The color of the axis line.
Default Value:
  • null
Names
Item Name
Property yAxis.axisLine.lineColor

y-axis.axis-line.line-width :number

The width of the axis line.
Default Value:
  • null
Names
Item Name
Property yAxis.axisLine.lineWidth

y-axis.axis-line.rendered :on|off|auto

Defines whether the axis line is rendered.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property yAxis.axisLine.rendered

y-axis.baseline-scaling :min|zero

Defines whether the axis baseline starts at the minimum value of the data or at zero. Only applies to numerical data axes.
Supported Values:
Value
min
zero
Default Value:
  • "zero"
Names
Item Name
Property yAxis.baselineScaling

y-axis.data-max :number

The maximum data value corresponding to an axis. If specified, the automatic axis extent calculation will use this value.
Default Value:
  • null
Names
Item Name
Property yAxis.dataMax

y-axis.data-min :number

The minimum data value corresponding to an axis. If specified, the automatic axis extent calculation will use this value.
Default Value:
  • null
Names
Item Name
Property yAxis.dataMin

y-axis.major-tick :Object

An object defining properties for the major tick marks.
Names
Item Name
Property yAxis.majorTick

y-axis.major-tick.baseline-color :inherit|auto

The color of the major tick mark at the baseline (y = 0). Valid values are auto, inherit, or a custom color. If set to inherit, it will follow the lineColor attribute.
Supported Values:
Value
auto
inherit
Default Value:
  • "auto"
Names
Item Name
Property yAxis.majorTick.baselineColor

y-axis.major-tick.baseline-style :dotted|dashed|solid

The line style of the major tick mark at the baseline (y = 0). If not specified, it will follow the lineStyle attribute.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property yAxis.majorTick.baselineStyle

y-axis.major-tick.baseline-width :number

The width of the major tick mark at the baseline (y = 0) If not specified, it will follow the lineWidth attribute.
Default Value:
  • null
Names
Item Name
Property yAxis.majorTick.baselineWidth

y-axis.major-tick.line-color :string

The color of the major tick marks.
Default Value:
  • null
Names
Item Name
Property yAxis.majorTick.lineColor

y-axis.major-tick.line-style :dotted|dashed|solid

The line style of the major tick marks.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property yAxis.majorTick.lineStyle

y-axis.major-tick.line-width :number

The width of the major tick marks.
Default Value:
  • null
Names
Item Name
Property yAxis.majorTick.lineWidth

y-axis.major-tick.rendered :on|off|auto

Defines whether the major tick marks are rendered.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property yAxis.majorTick.rendered

y-axis.max :number

The maximum value of the axis. Defaults to null for automatic calculation based on the data.
Default Value:
  • null
Names
Item Name
Property yAxis.max

y-axis.max-size :string

Defines the maximum size of the axis in pixels (e.g. '50px') or percent (e.g. '15%').
Default Value:
  • null
Names
Item Name
Property yAxis.maxSize

y-axis.min :number

The minimum value of the axis. Defaults to null for automatic calculation based on the data.
Default Value:
  • null
Names
Item Name
Property yAxis.min

y-axis.min-step :number

The minimum increment between major tick marks. This is typically used to prevent fractional axis values for discrete measures.
Default Value:
  • null
Names
Item Name
Property yAxis.minStep

y-axis.minor-step :number

The increment between minor tick marks. Defaults to null for automatic calculation based on the data. For log axis, the step is a multiplier, so for example, if the minorStep is 2, the minor tick marks will be rendered at 1, 2, 4, 8, and so on.
Default Value:
  • null
Names
Item Name
Property yAxis.minorStep

y-axis.minor-tick :Object

An object defining properties for the minor tick marks.
Names
Item Name
Property yAxis.minorTick

y-axis.minor-tick.line-color :string

The color of the minor tick marks.
Default Value:
  • null
Names
Item Name
Property yAxis.minorTick.lineColor

y-axis.minor-tick.line-style :dotted|dashed|solid

The line style of the minor tick marks.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Names
Item Name
Property yAxis.minorTick.lineStyle

y-axis.minor-tick.line-width :number

The width of the minor tick marks.
Default Value:
  • null
Names
Item Name
Property yAxis.minorTick.lineWidth

y-axis.minor-tick.rendered :on|off|auto

Defines whether the minor tick marks are rendered.
Supported Values:
Value
auto
off
on
Default Value:
  • "auto"
Names
Item Name
Property yAxis.minorTick.rendered

y-axis.position :start|end|top|bottom|auto

The position of the axis relative to its content. For vertical charts, only start and end apply. For horizontal charts, only top and bottom apply.
Supported Values:
Value
auto
bottom
end
start
top
Default Value:
  • "auto"
Names
Item Name
Property yAxis.position

y-axis.reference-objects :Array.<Object>

The array of reference objects associated with the axis.
Default Value:
  • []
Names
Item Name
Property yAxis.referenceObjects

yAxis.referenceObjects[].categories :Array.<string>

An optional array of category strings corresponding to this reference object. This allows highlighting and filtering of a reference object through interactions with legend sections. If not defined, the reference object id is used.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].color :string

The color of the reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].displayInLegend :on|off

Defines whether the reference object should be shown in the legend.
Supported Values:
Value
off
on
Default Value:
  • "off"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].high :number

The high value of an area reference object. This property defines a constant value across the entire reference area and is ignored if the items property is specified. See yAxis.referenceObjects[].type for more details.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].id :string

The id of the reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].items :Array.<Object>|Array.<number>

An array of values or an array of objects with the following properties that define the data for a varying reference object. Only supported for y1 and y2 axes for all chart types.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].items[].high :number

The high value of this point of a varying area reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].items[].low :number

The low value of this point of a varying area reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].items[].value :number

The value of this point of a varying line reference object. Null can be specified to skip a data point.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].items[].x :number|string

The x value of this point. Mainly used for scatter and bubble charts, and to specify the date for mixed-frequency time axis. For categorical axis, if the x value is not specified, it will default to the item index. For regular time axis, if the x value is not specified, it will default to the group name of the item.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].lineStyle :dotted|dashed|solid

The line style of the line reference area. Does not apply to area reference objects.
Supported Values:
Value
dashed
dotted
solid
Default Value:
  • "solid"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].lineType :curved|stepped|centeredStepped|segmented|centeredSegmented|straight

The line type of the varying reference object. "centeredStepped" and "centeredSegmented" are not supported for polar, scatter, and bubble charts. See yAxis.referenceObjects[].items for more details about varying reference objects.
Supported Values:
Value
centeredSegmented
centeredStepped
curved
segmented
stepped
straight
Default Value:
  • "straight"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].lineWidth :number

The width of the line reference object. Does not apply to area reference objects.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].location :front|back

The location of the reference object relative to the data items.
Supported Values:
Value
back
front
Default Value:
  • "back"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].low :number

The low value of an area reference object. This property defines a constant value across the entire reference area and is ignored if the items property is specified. See yAxis.referenceObjects[].type for more details.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].shortDesc :string

The description of this object. This is used for accessibility and also for customizing the tooltip text.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].svgClassName :string

The CSS style class to apply to the reference object. 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 reference object color attribute.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].svgStyle :CSSStyleDeclaration

The CSS inline style to apply to the reference object. 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 reference object color attribute. Only SVG CSS style properties are supported.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].text :string

The text displayed in the legend for the reference object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].type :area|line

The type of reference object being shown. If the value is set to "area", use the low and high properties of the reference object. Otherwise, use the value property. See yAxis.referenceObjects[].items for how to create a varying reference object.
Supported Values:
Value
area
line
Default Value:
  • "line"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

yAxis.referenceObjects[].value :number

The value of a line reference object. This property defines a constant value across the entire reference object and is ignored if the items property is specified. See yAxis.referenceObjects[].type for more details.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

y-axis.rendered :off|on

Defines whether the axis is rendered.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property yAxis.rendered

y-axis.scale :log|linear

Defines the axis scale. Only applies to numerical axes.
Supported Values:
Value
linear
log
Default Value:
  • "linear"
Names
Item Name
Property yAxis.scale

y-axis.size :string

Defines the size of the axis in pixels (e.g. '50px') or percent (e.g. '15%').
Default Value:
  • null
Names
Item Name
Property yAxis.size

y-axis.step :number

The increment between major tick marks. Defaults to null for automatic calculation based on the data. For log axis, the step is a multiplier, so for example, if the step is 2, the major tick marks will be rendered at 1, 2, 4, 8, and so on.
Default Value:
  • null
Names
Item Name
Property yAxis.step

y-axis.tick-label :Object

An object defining the properties of the tick labels.
Names
Item Name
Property yAxis.tickLabel

(nullable) y-axis.tick-label.converter :(Converter<number>)

The converter (an instance that duck types oj.Converter) used to format the labels. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Default Value:
  • null
Names
Item Name
Property yAxis.tickLabel.converter

y-axis.tick-label.position :inside|outside

Defines the position of the tick labels relative to the plot area. Inside position is not supported for scatter and bubble charts.
Supported Values:
Value
inside
outside
Default Value:
  • "outside"
Names
Item Name
Property yAxis.tickLabel.position

y-axis.tick-label.rendered :off|on

Defines whether the tick labels are rendered.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property yAxis.tickLabel.rendered

y-axis.tick-label.scaling :none|thousand|million|billion|trillion|quadrillion|auto

The scaling behavior of the labels. When using a converter, scaling should be set to none, as the formatted result may not be compatible with the scaling suffixes.
Supported Values:
Value
auto
billion
million
none
quadrillion
thousand
trillion
Default Value:
  • "auto"
Names
Item Name
Property yAxis.tickLabel.scaling

y-axis.tick-label.style :CSSStyleDeclaration

The CSS style object defining the style of the labels. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. Polar chart axis also supports backgroundColor.
Default Value:
  • {}
Names
Item Name
Property yAxis.tickLabel.style

y-axis.title :string

The axis title. Does not apply to polar charts.
Default Value:
  • null
Names
Item Name
Property yAxis.title

y-axis.title-style :CSSStyleDeclaration

The CSS style object defining the style of the axis title. The CSS white-space property can be defined with value "nowrap" to disable default text wrapping of the title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property yAxis.titleStyle

y-axis.viewport-max :number

Specifies the maximum y coordinate of the current viewport for zoom and scroll. Only applies to bubble and scatter charts. If not specified, this value will be the axis max.
Default Value:
  • null
Names
Item Name
Property yAxis.viewportMax

y-axis.viewport-min :number

Specifies the minimum y coordinate of the current viewport for zoom and scroll. Only applies to bubble and scatter charts. If not specified, this value will be the axis min.
Default Value:
  • null
Names
Item Name
Property yAxis.viewportMin

zoom-and-scroll :delayedScrollOnly|liveScrollOnly|delayed|live|off

Specifies the zoom and scroll behavior of the chart. "Live" behavior means that the chart will be updated continuously as it is being manipulated, while "delayed" means that the update will wait until the zoom/scroll action is done. While "live" zoom and scroll provides the best end user experience, no guarantess are made about the rendering performance or usability for large data sets or slow client environments. If performance is an issue, "delayed" zoom and scroll should be used instead.
Supported Values:
Value
delayed
delayedScrollOnly
live
liveScrollOnly
off
Default Value:
  • "off"
Names
Item Name
Property zoomAndScroll
Property change event zoomAndScrollChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-zoom-and-scroll-changed

zoom-direction :x|y|auto

Specifies the zoom direction of bubble and scatter charts. "Auto" zooms in both x and y direction. Use "x" or "y" for single direction zooming.
Supported Values:
Value
auto
x
y
Default Value:
  • "auto"
Names
Item Name
Property zoomDirection
Property change event zoomDirectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-zoom-direction-changed

Context Objects

Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

Properties:
Name Type Description
subId string Sub-id string to identify a particular dom node.

Following are the valid subIds:

oj-chart-axis-title

Context for the title of the specified axis.

Properties:
Name Type Description
axis string xAxis, yAxis, or y2Axis

oj-chart-group

Context for a categorical axis label that represents the group with the specified index.

Properties:
Name Type Description
indexPath Array The array of indices corresponding to the position of the group in the properties array.

oj-chart-item

Context for chart data items indexed by series and group indices.

Properties:
Name Type
seriesIndex number
itemIndex number

oj-chart-pie-center-label

Context for the center label of a pie chart.

oj-chart-reference-object

Context for the reference object of the specified axis with the given index.

Properties:
Name Type Description
axis string xAxis, yAxis, or y2Axis
index number The index of the reference object for the specified axis.

oj-chart-series

Context for a legend item that represents the series with the specified index.

Properties:
Name Type
index number

oj-legend-item

Context for a legend item indexed by its position in its parent section's item array and its parent's sectionIndex.

Properties:
Name Type Description
sectionIndexPath Array The array of numerical indices for the section.
itemIndex number The index of the item within the specified section.

Events

ojDrill

Triggered during a drill gesture (double click if selection is enabled, single click otherwise).
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
id string the id of the drilled object
series string the series id of the drilled object, if applicable
group string the group id of the drilled object, if applicable
data ojChart.Item<K, Array.<oj.ojChart.Item<any, null>> | Array.<number> | null> | number | null oj.ojChart.Item.<K, I> | number | null the data object of the drilled item
itemData D the row data object of the drilled item. This will only be set if a DataProvider is being used.
seriesData oj.ojChart.Series.<K, I> | null the data for the series of the drilled object
groupData Array.<oj.ojChart.Group> | null an array of data for the group the drilled object belongs to. For hierarchical groups, it will be an array of outermost to innermost group data related to the drilled object

ojSelectInput

Triggered during a selection gesture, such as a change in the marquee selection rectangle.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
items Array.<string> an array containing the string ids of the selected data items
selectionData Array.<Object> an array containing objects describing the selected data items
Properties
Name Type Description
data ojChart.Item<K, Array.<oj.ojChart.Item<any, null>> | Array.<number> | null> | number oj.ojChart.Item.<K, I> | number the data of the item, if one was specified
itemData D the row data of the item, if one was specified. This will only be set if a DataProvider is used.
groupData Array.<oj.ojChart.Group> the group data of the item
seriesData oj.ojChart.Series.<K, I> the series data of the item
endGroup string the end group of a marquee selection on a chart with categorical axis
startGroup string the start group of a marquee selection on a chart with categorical axis
xMax number the maximum x value of a marquee selection
xMin number the minimum x value of a marquee selection
yMax number the maximum y value of a marquee selection
yMin number the minimum y value of a marquee selection

ojViewportChange

Triggered after the viewport is changed due to a zoom or scroll operation.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
endGroup string the end group of the new viewport on a chart with categorical axis
startGroup string the start group of the new viewport on a chart with categorical axis
xMax number the maximum x value of the new viewport
xMin number the minimum x value of the new viewport
yMax number the maximum y value of the new viewport
yMin number the minimum y value of the new viewport

ojViewportChangeInput

Triggered during a viewport change gesture, such as a drag operation on the overview window. Note: There are situations where the chart cannot determine whether the viewport change gesture is still in progress, such as with mouse wheel zoom interactions. Standard viewportChange events are fired in these cases.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
endGroup string the end group of the new viewport on a chart with categorical axis
startGroup string the start group of the new viewport on a chart with categorical axis
xMax number the maximum x value of the new viewport
xMin number the minimum x value of the new viewport
yMax number the maximum y value of the new viewport
yMin number the minimum y value of the new viewport

Methods

(static) getYAxis : {Object}

Returns an object with the following properties for automation testing verification of the y axis.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Properties:
Name Type Description
bounds Object An object containing the bounds of the legend.
Properties
Name Type
x number
y number
width number
height number
title string
getPreferredSize Function(number, number) Returns the preferred size of the axis, given the available width and height. This value can be passed into the size and maxSize options of the axis. A re-render must be triggered by calling refresh after invoking this function.
Properties
Name Type
width number
height number
Returns:
An object containing properties for the y axis.
Type
Object

getContextByNode(node) : {(oj.ojChart.PieCenterLabelContext|oj.ojChart.LegendItemContext|oj.ojChart.ReferenceObject|oj.ojChart.GroupContext|oj.ojChart.AxisTitleContext|oj.ojChart.ItemContext|oj.ojChart.SeriesContext)}

Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects.
Parameters:
Name Type Argument Description
node Element <not nullable>
 The child DOM node
Returns:
The context for the DOM node, or null when none is found.
Type
(oj.ojChart.PieCenterLabelContext|oj.ojChart.LegendItemContext|oj.ojChart.ReferenceObject|oj.ojChart.GroupContext|oj.ojChart.AxisTitleContext|oj.ojChart.ItemContext|oj.ojChart.SeriesContext)

getDataItem(seriesIndex, groupIndex) : {Object|null}

Returns an object with the following properties for automation testing verification of the data item with the specified series and group indices.
Parameters:
Name Type Description
seriesIndex number
groupIndex number
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Properties:
Name Type Description
borderColor string
color string
close number The closing value for a stock item
group string The group id.
high number The high value for a range or stock item
label string
low number The low value for a range or stock item
open number The opening value for a stock item
selected boolean
series string The series id.
targetValue number The target value for a funnel slice.
tooltip string
value number
volume number The volume of a stock item
x number
y number
z number
Returns:
An object containing properties for the data item, or null if none exists.
Type
Object | null

getGroup(groupIndex) : {string}

Returns the group corresponding to the given index
Parameters:
Name Type Description
groupIndex string the group index
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
The group name corresponding to the given group index
Type
string

getGroupCount : {number}

Returns number of groups in the chart data
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
The number of groups
Type
number

getLegend : {Object}

Returns an object with the following properties for automation testing verification of the chart legend.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Properties:
Name Type Description
bounds Object An object containing the bounds of the legend.
Properties
Name Type
x number
y number
width number
height number
title string
Returns:
An object containing properties for the chart legend.
Type
Object

getPlotArea : {Object}

Returns an object with the following properties for automation testing verification of the chart plot area.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Properties:
Name Type Description
bounds Object An object containing the bounds of the plot area.
Properties
Name Type
x number
y number
width number
height number
Returns:
An object containing properties for the chart plot area.
Type
Object

getProperty(property) : {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Since:
  • 4.0.0
Returns:
Type
any
Example

Get a single subproperty of a complex property:

let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

getSeries(seriesIndex) : {string}

Returns the series corresponding to the given index
Parameters:
Name Type Description
seriesIndex string the series index
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
The series name corresponding to the given series index
Type
string

getSeriesCount : {number}

Returns number of series in the chart data
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
The number of series
Type
number

getValuesAt(x, y) : {{x: number|string|null, y: number|null, y2:number|null}}

Returns the x, y, and y2 axis values at the specified X and Y coordinate.
Parameters:
Name Type Description
x number The X coordinate relative to the component.
y number The Y coordinate relative to the component.
Returns:
An object containing the "x", "y", and "y2" axis values.
Type
{x: number|string|null, y: number|null, y2:number|null}

getXAxis : {Object}

Returns an object with the following properties for automation testing verification of the x axis.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Properties:
Name Type Description
bounds Object An object containing the bounds of the legend.
Properties
Name Type
x number
y number
width number
height number
title string
getPreferredSize Function(number, number) Returns the preferred size of the axis, given the available width and height. This value can be passed into the size and maxSize options of the axis. A re-render must be triggered by calling refresh after invoking this function.
Properties
Name Type
width number
height number
Returns:
An object containing properties for the x axis.
Type
Object

getY2Axis : {Object}

Returns an object with the following properties for automation testing verification of the y2 axis.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Properties:
Name Type Description
bounds Object An object containing the bounds of the legend.
Properties
Name Type
x number
y number
width number
height number
title string
getPreferredSize Function(number, number) Returns the preferred size of the axis, given the available width and height. This value can be passed into the size and maxSize options of the axis. A re-render must be triggered by calling refresh after invoking this function.
Properties
Name Type
width number
height number
Returns:
An object containing properties for the y2 axis.
Type
Object

refresh : {void}

Refreshes the component.
Returns:
Type
void

setProperties(properties) : {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) : {void}

Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");

Type Definitions

AxisTitleContext

Properties:
Name Type Description
axis "xAxis" | "yAxis" | "y2Axis"
subId string Sub-id string to identify a particular dom node.

BoxPlotStyle

Object type that defines box plot style properties.
Properties:
Name Type Argument Description
medianSvgClassName string <optional>
 The CSS style class to apply to the median line.
medianSvgStyle CSSStyleDeclaration <optional>
 The CSS inline style to apply to the median line. Only SVG CSS style properties are supported.
q2Color string <optional>
 The color of the Q2 segment of the box.
q2SvgClassName string <optional>
 The CSS style class to apply to the Q2 segment of the box. 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 q2Color attribute.
q2SvgStyle CSSStyleDeclaration <optional>
 The CSS inline style to apply to the Q2 segment of the box. 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 q2Color attribute. Only SVG CSS style properties are supported.
q3Color string <optional>
 The color of the Q3 segment of the box.
q3SvgClassName string <optional>
 The CSS style class to apply to the Q3 segment of the box. 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 q3Color attribute.
q3SvgStyle CSSStyleDeclaration <optional>
 The CSS inline style to apply to the Q3 segment of the box. 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 q3Color attribute. Only SVG CSS style properties are supported.
whiskerEndLength string <optional>
 Specifies the length of the whisker ends in pixels (e.g. '9px') or as a percentage of the box width (e.g. '50%').
whiskerEndSvgClassName string <optional>
 The CSS style class to apply to the whisker ends.
whiskerEndSvgStyle CSSStyleDeclaration <optional>
 The CSS inline style to apply to the whisker ends. Only SVG CSS style properties are supported.
whiskerSvgClassName string <optional>
 The CSS style class to apply to the whisker stems.
whiskerSvgStyle CSSStyleDeclaration <optional>
 The CSS inline style to apply to the whisker stems. Only SVG CSS style properties are supported.

DataItem<I extends Array.<ojChart.Item<any, null>>|Array.<number>|null>

Object type that defines a chart data item for the no template case.
Properties:
Name Type Argument Default Description
groupId Array.<(string|number)> The id of the group item. This id will be provided as part of the context for events on the chart.
seriesId string | number The id of the series item. This id will be provided as part of the context for events on the chart.
x number | string <optional>
 The x value. Mainly used for scatter and bubble chart and to specify the date for mixed-frequency time axis. For categorical axis, if the x value is not specified, it will default to the item index. For regular time axis, if the x value is not specified, it will default to the group name of the item.
y number <optional>
 The y value. Also the primary value for charts without a y-Axis, such as pie charts.
z number <optional>
 The z value. Defines the bubble radius for a bubble chart, as well as the width of a bar or a box plot item.
low number <optional>
 The low value for range bar/area, stock candlestick, or box plot item. Define 'low' and 'high' instead of 'value' or 'y' to create a range bar/area chart.
high number <optional>
 The high value for range bar/area, stock candlestick, or box plot item. Define 'low' and 'high' instead of 'value' or 'y' to create a range bar/area chart.
open number <optional>
 The open value for stock candlestick.
close number <optional>
 The close value for stock candlestick. When bar, line, or area series type are used on a stock chart, this value is displayed.
volume number <optional>
 The value for stock volume bar. When this value is provided, the volume bar is displayed on the y2 axis.
q1 number <optional>
 The first quartile value for box plot.
q2 number <optional>
 The second quartile (median) value for box plot.
q3 number <optional>
 The third quartile value for box plot.
shortDesc string <optional>
 The description of this object. This is used for accessibility and also for customizing the tooltip text.
color string <optional>
 The color of the data item.
borderColor string <optional>
 The border color of the data item. For funnel and pyramid charts, it is used for the slice border.
borderWidth number <optional>
 The border width of the data item. For funnel and pyramid charts, it is used for the slice border.
pattern smallChecker | smallCrosshatch | smallDiagonalLeft | smallDiagonalRight | smallDiamond | smallTriangle | largeChecker | largeCrosshatch | largeDiagonalLeft | largeDiagonalRight | largeDiamond | largeTriangle | auto <optional>
 "auto" The pattern used to fill the data item. A solid fill is used by default, unless the seriesEffect is 'pattern'.
svgClassName string <optional>
 The CSS style class to apply to the data item. 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 item color attribute.
svgStyle CSSStyleDeclaration <optional>
 The CSS inline style to apply to the data item. 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 item color attribute. Only SVG CSS style properties are supported.
markerDisplayed on | off | auto <optional>
 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.
markerShape "circle" | "diamond" | "human" | "plus" | "square" | "star" | "triangleDown" | "triangleUp" | "auto" | string <optional>
 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.
markerSize number <optional>
 The size of the data markers. Does not apply to bubble charts, which calculate marker size based on the z values.
source string <optional>
 The URI of the custom image. If specified, it takes precedence over marker-shape.
sourceHover string <optional>
 The optional URI for the hover state. If not specified, the source image will be used.
sourceSelected string <optional>
 The optional URI for the selected state. If not specified, the source image will be used.
sourceHoverSelected string <optional>
 The optional URI for the hover selected state. If not specified, the source image will be used.
label string | Array.<string> <optional>
 The label for the data item. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. Not supported for box plot or candlestick.
labelPosition center | outsideSlice | aboveMarker | belowMarker | beforeMarker | afterMarker | insideBarEdge | outsideBarEdge | none | auto <optional>
 The position of the data label. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. The 'outsideSlice' value only applies to pie charts. The 'aboveMarker', 'belowMarker', 'beforeMarker', and 'afterMarker' values only apply to line, area, scatter, and bubble series. The 'insideBarEdge' and 'outsideBarEdge' values only apply to non-polar bar series. Stacked bars do not support 'outsideBarEdge'. The chart does not currently adjust layout to fit labels within the plot area or deal with any overlaps between labels.
labelStyle CSSStyleDeclaration | Array<CSSStyleDeclaration> <optional>
 The CSS style object defining the style of the data label. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
categories Array.<string> <optional>
 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.
value number <optional>
 The value for this data item. Corresponding to the y value for bar, line, area, and combo charts and the slice values for pie, funnel and pyramid charts. Null can be specified to skip a data point.
targetValue number <optional>
 The target value for a funnel chart. When this is set, the value attribute defines the filled area within the slice and this represents the value of the whole slice.
drilling on | off | inherit <optional>
 "inherit" 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.
boxPlot ojChart.BoxPlotStyle= <optional>
 An object containing the style properties of the box plot item.

DataLabelContext<K, D, I extends Array.<ojChart.Item<any, null>>|Array.<number>|null>

Properties:
Name Type Description
id any The id of the data item.
series string The id of the series the data item belongs to.
group string | Array.<string> The id or an array of ids of the group(s) the data item belongs to. For hierarchical groups, it will be an array of outermost to innermost group ids.
value number The values of the data item.
targetValue number The values of the data item.
x number | string The values of the data item.
y number The values of the data item.
z number The values of the data item.
low number The values of the data item.
high number The values of the data item.
open number The values of the data item.
close number The values of the data item.
volume number The values of the data item.
label string The label for the data item if the dataLabel callback is ignored. The dataLabel callback can concatenate this with another string to easily enhance the default label.
totalValue number The total of all values in the chart. This will only be included for pie charts.
data ojChart.Item<K, Array.<oj.ojChart.Item<any, null>> | Array.<number> | null> | number | null oj.ojChart.Item.<K, I> | Array.<number> | null> | number | null The data object of the data item. For nested items, it will be an array containing the parent item data and nested item data.
itemData D The row data object for the data item. This will only be set if a DataProvider is being used.
seriesData oj.ojChart.Series.<K, I> | null The data for the series the data item belongs to.
groupData Array.<oj.ojChart.Group> | null An array of data for the group the data item belongs to. For hierarchical groups, it will be an array of outermost to innermost group data related to the data item.
dimensions Object | null The height and width of the data item. This will only be set for bar series types.
Properties
Name Type Description
width number The width of the data item.
height number The height of the data item.
componentElement Element The chart element.

DndDrop

Properties:
Name Type Description
x number | null The X axis value at the event position. This is populated for plot area and x axis "drops".
y number | null The Y axis value at the event position. This is populated for plot area and y axis "drops".
y2 number | null The Y2 axis value at the event position. This is populated for plot area and y2 axis "drops".

DndGroup

Properties:
Name Type Description
id string | number | Array.<(string|number)> The id of the group.
group string | number | Array.<(string|number)> The id of the group.
label string The label for the group.

DndItem<K, D, I extends Array.<ojChart.Item<any, null>>|Array.<number>|null>

Properties:
Name Type Description
item Array.<oj.ojChart.DataLabelContext.<K, D, I>> An array of dataContexts of the dragged data items. The dataContext is the same as what we use for "tooltip" and "dataLabels" properties.

DndSeries<K, I extends Array.<ojChart.Item<any, null>>|Array.<number>|null>

Properties:
Name Type Description
id string | number The id of the series.
color string The color of the series.
componentElement any The chart element.
series string | number The id of the series.
seriesData oj.ojChart.Series.<K, I> The data for the series.

Group

Object type that defines a chart group.
Properties:
Name Type Argument Default Description
id string | number <optional>
 The id of the group. Defaults to the name if not specified. This is also used to specify the date for non mixed frequency time axes.
groups Array.<ojChart.Group>= <optional>
 An array of nested group objects.
drilling on | off | inherit <optional>
 "inherit" Whether drilling is enabled on the group label. Drillable objects will show a pointer cursor on hover and fire an ojDrill event on click. To enable drilling for all group labels at once, use the drilling attribute in the top level.
labelStyle CSSStyleDeclaration <optional>
 The CSS style object defining the style of the group label text. The following style properties are supported: backgroundColor, borderColor, borderRadius, borderWidth, color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. Only applies to a categorical axis.
name string <optional>
 The name of the group.
shortDesc string <optional>
 The description of the group. This is used for customizing the tooltip text and only applies to a categorical axis.

GroupContext

Properties:
Name Type Description
indexPath Array The array of indices corresponding to the position of the group in the properties array. The array of numerical indices for the section.
subId string Sub-id string to identify a particular dom node.

GroupTemplateContext<D>

Properties:
Name Type Description
componentElement Element The <oj-chart> custom element
index number The group index
ids Array.<string> An array of group IDs, from the outermost group to the current group. For non-hierarchical group, the array will contain only one id.
depth number The depth of the group. The depth of the outermost group under the invisible root is 1.
leaf boolean True if the group is a leaf group.
items Array.<Object> The array of objects which are chart items that belong to this group. The objects will have the following properties:
Properties
Name Type Description
data D The data object for the item
index number The zero-based index of the item
key any The key of the current item

Item<K, I extends Array.<ojChart.Item<any, null>>|Array.<number>|null>

Object type that defines a chart data item.
Properties:
Name Type Argument Default Description
id K The id of the chart item. This id will be provided as part of the context for events on the chart.
items I <optional>
 An array of nested data items to be used for defining the markers for outliers or additional data items of a box plot.
x number | string <optional>
 The x value. Mainly used for scatter and bubble chart and to specify the date for mixed-frequency time axis. For categorical axis, if the x value is not specified, it will default to the item index. For regular time axis, if the x value is not specified, it will default to the group name of the item.
y number <optional>
 The y value. Also the primary value for charts without a y-Axis, such as pie charts.
z number <optional>
 The z value. Defines the bubble radius for a bubble chart, as well as the width of a bar or a box plot item.
low number <optional>
 The low value for range bar/area, stock candlestick, or box plot item. Define 'low' and 'high' instead of 'value' or 'y' to create a range bar/area chart.
high number <optional>
 The high value for range bar/area, stock candlestick, or box plot item. Define 'low' and 'high' instead of 'value' or 'y' to create a range bar/area chart.
open number <optional>
 The open value for stock candlestick.
close number <optional>
 The close value for stock candlestick. When bar, line, or area series type are used on a stock chart, this value is displayed.
volume number <optional>
 The value for stock volume bar. When this value is provided, the volume bar is displayed on the y2 axis.
q1 number <optional>
 The first quartile value for box plot.
q2 number <optional>
 The second quartile (median) value for box plot.
q3 number <optional>
 The third quartile value for box plot.
shortDesc string <optional>
 The description of this object. This is used for accessibility and also for customizing the tooltip text.
color string <optional>
 The color of the data item.
borderColor string <optional>
 The border color of the data item. For funnel and pyramid charts, it is used for the slice border.
borderWidth number <optional>
 The border width of the data item. For funnel and pyramid charts, it is used for the slice border.
pattern smallChecker | smallCrosshatch | smallDiagonalLeft | smallDiagonalRight | smallDiamond | smallTriangle | largeChecker | largeCrosshatch | largeDiagonalLeft | largeDiagonalRight | largeDiamond | largeTriangle | auto <optional>
 "auto" The pattern used to fill the data item. A solid fill is used by default, unless the seriesEffect is 'pattern'.
svgClassName string <optional>
 The CSS style class to apply to the data item. 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 item color attribute.
svgStyle CSSStyleDeclaration <optional>
 The CSS inline style to apply to the data item. 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 item color attribute. Only SVG CSS style properties are supported.
markerDisplayed on | off | auto <optional>
 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.
markerShape "circle" | "diamond" | "human" | "plus" | "square" | "star" | "triangleDown" | "triangleUp" | "auto" | string <optional>
 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.
markerSize number <optional>
 The size of the data markers. Does not apply to bubble charts, which calculate marker size based on the z values.
source string <optional>
 The URI of the custom image. If specified, it takes precedence over marker-shape.
sourceHover string <optional>
 The optional URI for the hover state. If not specified, the source image will be used.
sourceSelected string <optional>
 The optional URI for the selected state. If not specified, the source image will be used.
sourceHoverSelected string <optional>
 The optional URI for the hover selected state. If not specified, the source image will be used.
label string | Array.<string> <optional>
 The label for the data item. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. Not supported for box plot or candlestick.
labelPosition center | outsideSlice | aboveMarker | belowMarker | beforeMarker | afterMarker | insideBarEdge | outsideBarEdge | none | auto <optional>
 The position of the data label. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. The 'outsideSlice' value only applies to pie charts. The 'aboveMarker', 'belowMarker', 'beforeMarker', and 'afterMarker' values only apply to line, area, scatter, and bubble series. The 'insideBarEdge' and 'outsideBarEdge' values only apply to non-polar bar series. Stacked bars do not support 'outsideBarEdge'. The chart does not currently adjust layout to fit labels within the plot area or deal with any overlaps between labels.
labelStyle CSSStyleDeclaration | Array<CSSStyleDeclaration> <optional>
 The CSS style object defining the style of the data label. For range series, if an array of two values is provided, the first and second value will apply to the low and high point respectively. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
categories Array.<string> <optional>
 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.
value number <optional>
 The value for this data item. Corresponding to the y value for bar, line, area, and combo charts and the slice values for pie, funnel and pyramid charts. Null can be specified to skip a data point.
targetValue number <optional>
 The target value for a funnel chart. When this is set, the value attribute defines the filled area within the slice and this represents the value of the whole slice.
drilling on | off | inherit <optional>
 "inherit" 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.
boxPlot ojChart.BoxPlotStyle= <optional>
 An object containing the style properties of the box plot item.

ItemContext

Properties:
Name Type Description
seriesIndex number The index of the series within the specified section.
itemIndex number The index of the item within the specified section.
subId string Sub-id string to identify a particular dom node.

ItemTemplateContext

Properties:
Name Type Description
componentElement Element The <oj-chart> custom element
index number The zero-based index of the current item
data Object The data object for the current item
key any The key of the current item

LegendItem

Object type that defines a chart data item.
Properties:
Name Type Argument Default Description
borderColor string <optional>
 The border color of the marker. Only applies if symbolType is "marker" or "lineWithMarker".
categories Array.<string> <optional>
 An array of categories for the legend item. Legend items currently only support a single category. If no category is specified, this defaults to the id or text of the legend item.
categoryVisibility "hidden" | "visible" <optional>
 "visible" Defines whether the legend item corresponds to visible data items. A hollow symbol is shown if the value is "hidden".
color string <optional>
 The color of the legend symbol (line or marker). When symbolType is "lineWithMarker", this attribute defines the line color and the markerColor attribute defines the marker color.
id string <optional>
 The id of the legend item, which is provided as part of the context for events fired by the legend. If not specified, the default depends upon whether a DataProvider is being used.

For the DataProvider case, the key for the node will be used as the default id. Otherwise, the id defaults to the text of the legend item.
lineStyle "dashed" | "dotted" | "solid" <optional>
 "solid" The line style. Only applies when the symbolType is "line" or "lineWithMarker".
lineWidth number <optional>
 The line width in pixels. Only applies when the symbolType is "line" or "lineWithMarker".
markerColor string <optional>
 The color of the marker, if different than the line color. Only applies if the symbolType is "lineWithMarker".
markerShape "circle" | "diamond" | "ellipse" | "human" | "plus" | "rectangle" | "square" | "star" | "triangleDown" | "triangleUp" | string <optional>
 "square" The shape of the marker. Only applies if symbolType is "marker" or "lineWithMarker". Can take the name of a built-in shape or the SVG path commands for a custom shape. Does not apply if a custom image is specified.
pattern "largeChecker" | "largeCrosshatch" | "largeDiagonalLeft" | "largeDiagonalRight" | "largeDiamond" | "largeTriangle" | "none" | "smallChecker" | "smallCrosshatch" | "smallDiagonalLeft" | "smallDiagonalRight" | "smallDiamond" | "smallTriangle" <optional>
 "none" The pattern used to fill the marker. Only applies if symbolType is "marker" or "lineWithMarker".
shortDesc string <optional>
 The description of this legend item. This is used for accessibility and for customizing the tooltip text.
source string <optional>
 The URI of the image of the legend symbol.
symbolType "image" | "line" | "lineWithMarker" | "marker" <optional>
 "marker" The type of legend symbol to display.
text string <optional>
 The legend item text.

LegendItemContext

Properties:
Name Type Description
sectionIndexPath Array The array of numerical indices for the section.
itemIndex number The index of the item within the specified section.
subId string Sub-id string to identify a particular dom node.

LegendSection

Object type that defines a legend section.
Properties:
Name Type Argument Default Description
items Array.<ojChart.LegendItem>= <optional>
 An array of objects with the following properties defining the legend items. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
sections Array.<ojChart.LegendSection>= <optional>
 An array of nested legend sections.
title string <optional>
 The title of the legend section.
titleHalign "center" | "end" | "start" <optional>
 "start" The horizontal alignment of the section title. If the section is collapsible or nested, only start alignment is supported.
titleStyle CSSStyleDeclaration= <optional>
 The CSS style object defining the style of the section title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.

PieCenterContext

Properties:
Name Type Description
outerBounds Object Object containing (x, y, width, height) of the rectangle circumscribing the center area. The x and y coordinates are relative to the top, left corner of the element.
Properties
Name Type Description
x number The x coordinate of the rectangle circumscribing the center area, relative to the top, left corner of the element.
y number The y coordinate of the rectangle circumscribing the center area, relative to the top, left corner of the element.
width number The width of the rectangle circumscribing the center area.
height number The height of the rectangle circumscribing the center area.
innerBounds Object Object containing (x, y, width, height) of the rectangle inscribed in the center area. The x and y coordinates are relative to the top, left corner of the element.
Properties
Name Type Description
x number The x coordinate of the rectangle inscribed in the center area, relative to the top, left corner of the element.
y number The y coordinate of the rectangle inscribed in the center area, relative to the top, left corner of the element.
width number The width of the rectangle inscribed in the center area.
height number The height of the rectangle inscribed in the center area.
labelStyle CSSStyleDeclaration= The CSS style object defining the style of the label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
label string The pieCenter label.
totalValue number The total of all values in the pie chart.
componentElement Element The chart element.

PieCenterLabelContext

Properties:
Name Type Description
subId string Sub-id string to identify a particular dom node.

ReferenceObject

Properties:
Name Type Description
axis "xAxis" | "yAxis" | "y2Axis"
index number The index of the reference object for the specified axis.
subId string Sub-id string to identify a particular dom node.

Series<K, I extends Array.<ojChart.Item<any, null>>|Array.<number>|null>

Object type that defines a chart series.
Properties:
Name Type Argument Default Description
id string | number <optional>
 The id of the series. Defaults to the name or the series index if not specified.
items (Array.<ojChart.Item<K, Array.<oj.ojChart.Item<any, null>> | Array.<number> | null>> | Array.<number>)= (Array.<ojChart.Item<K, I> | Array.<number> | null>> | Array.<number>)= <optional>
 An array of values or an array of objects that defines the data items for the series.
areaColor string <optional>
 The area color of the series. Only applies if series type is area or lineWithArea.
areaSvgClassName string <optional>
 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.
areaSvgStyle CSSStyleDeclaration= <optional>
 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.
assignedToY2 on | off <optional>
 "off" Defines whether the series is associated with the y2 axis. Only applies to Cartesian bar, line, area, and combo charts.
borderColor string <optional>
 The border color of the series.
borderWidth number <optional>
 The border width of the series.
boxPlot ojChart.BoxPlotStyle= <optional>
 An object containing the style properties of the box plot series.
categories Array.<string> <optional>
 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 <optional>
 The color of the series.
displayInLegend on | off | auto <optional>
 "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.
drilling on | off | inherit <optional>
 "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.
lineStyle dotted | dashed | solid <optional>
 The line style of the data line. Only applies to line, lineWithArea, scatter, and bubble series.
lineType straight | curved | stepped | centeredStepped | segmented | centeredSegmented | none | auto <optional>
 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.
lineWidth number <optional>
 The width of the data line. Only applies to line, lineWithArea, scatter, and bubble series.
markerColor string <optional>
 The color of the data markers, if different from the series color.
markerDisplayed on | off | auto <optional>
 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.
markerShape "auto" | "square" | "circle" | "diamond" | "plus" | "triangleDown" | "triangleUp" | "human" | "star" | string <optional>
 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.
markerSize number <optional>
 The size of the data markers.
markerSvgClassName string <optional>
 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.
markerSvgStyle CSSStyleDeclaration= <optional>
 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 <optional>
 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 <optional>
 "auto" The pattern used to fill the series. A solid fill is used by default, unless the seriesEffect is 'pattern'.
pieSliceExplode number <optional>
 0 A number from 0 to 1 indicating the amount to explode the pie slice. Only applies to pie charts.
shortDesc string <optional>
 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 <optional>
 The URI of the custom image. If specified, it takes precedence over shape.
sourceHover string <optional>
 The optional URI for the hover state. If not specified, the source image will be used.
sourceHoverSelected string <optional>
 The optional URI for the hover selected state. If not specified, the source image will be used.
sourceSelected string <optional>
 The optional URI for the selected state. If not specified, the source image will be used.
stackCategory string <optional>
 In stacked charts, groups series together for stacking. All series without a stackCategory will be assigned to the same stack.
svgClassName string <optional>
 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.
svgStyle CSSStyleDeclaration= <optional>
 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 <optional>
 "auto" The type of data objects to display for this series. Only applies to bar, line, area, stock, box plot, and combo charts.

SeriesContext

Context for a legend item that represents the series with the specified index.
Properties:
Name Type Description
itemIndex number The index of the item within the specified section.
subId string Sub-id string to identify a particular dom node.

SeriesTemplateContext<D>

Properties:
Name Type Description
componentElement Element The <oj-chart> custom element
index number The series index
id string The series id
items Array.<Object> The array of objects which are chart items that belong to this series. The objects will have the following properties
Properties
Name Type Description
data D The data object for the item
index number The zero-based index of the item
key any The key of the current item

TooltipContext<K, D, I extends Array.<ojChart.Item<any, null>>|Array.<number>|null>

Properties:
Name Type Description
parentElement Element The tooltip element. This can be used to change the tooltip border or background color.
id any The id of the hovered item.
series string The id of the series the hovered item belongs to.
group string | Array.<string> The ids or an array of ids of the group(s) the hovered item belongs to. For hierarchical groups, it will be an array of outermost to innermost group ids.
label string The data label of the hovered item.
value number The values of the hovered item.
x number | string The values of the hovered item.
y number The values of the hovered item.
z number The values of the hovered item.
low number The values of the hovered item.
high number The values of the hovered item.
open number The values of the hovered item.
close number The values of the hovered item.
volume number The values of the hovered item.
targetValue number The values of the hovered item.
data ojChart.Item<K, Array.<oj.ojChart.Item<any, null>> | Array.<number> | null> | number | null oj.ojChart.Item.<K, I> | Array.<number> | null> | number | null The data object of the hovered item. For nested items, it will be an array containing the parent item data and nested item data.
itemData D The row data object for the hovered item. This will only be set if a DataProvider is being used.
seriesData oj.ojChart.Series.<K, I> | null The data for the series the hovered item belongs to.
groupData Array.<oj.ojChart.Group> | null An array of data for the group the hovered item belongs to. For hierarchical groups, it will be an array of outermost to innermost group data related to the hovered item.
componentElement Element The chart element.
color string The color of the hovered item.