Element: <oj-spark-chart>

Slots

JET elements can have up to two types of child content:

• Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>. All supported named slots are documented below. Child elements with unsupported named slots will be removed from the DOM.
• Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child.

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

Example

Initialize the component with a context menu:

<oj-some-element>
    <-- use the contextMenu slot to designate this as the context menu for this component -->
    <oj-menu slot="contextMenu" style="display:none" aria-label="Some element's context menu">
...
    </oj-menu>
</oj-some-element>

itemTemplate

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

The itemTemplate slot is used to specify the template for creating each item of the spark chart when a DataProvider has been specified with the data attribute. The slot must be a <template> element.

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

• $current - an object that contains information for the current item
• alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.

The content of the template should only be one <oj-spark-chart-item> element. See the oj-spark-chart-item doc for more details.

Properties of $current:

Name	Type	Description
componentElement	Element	The <oj-spark-chart> custom element.
data	Object	The data object for the current item.
index	number	The zero-based index of the current item.
key	any	The key of the current item.

Example

Initialize the spark chart with an inline item template specified:

<oj-spark-chart data='[[dataProvider]]'>
 <template slot='item'>
   <oj-spark-chart-item
     high='[[$current.data.high]]'
     low='[[$current.data.low]]'>
   </oj-spark-chart-item>
 </template>
</oj-spark-chart>

Attributes

(nullable) animation-duration :number

The duration of the animations in milliseconds. The default value comes from the CSS and varies based on theme.

Names

Item	Name
Property	animationDuration
Property change event	animationDurationChanged
Property change listener attribute (must be of type function)	on-animation-duration-changed

Examples

Initialize the spark chart with the animation-duration attribute specified:

<oj-spark-chart animation-duration='50'></oj-spark-chart>

Get or set the animationDuration property after initialization:

// getter
var value = mySparkChart.animationDuration;

// setter
mySparkChart.animationDuration = 50;

animation-on-data-change :string

Defines the animation that is applied on data changes.

Supported Values:

Name	Type
"auto"	string
"none"	string

Default Value:

• "none"

Names

Item	Name
Property	animationOnDataChange
Property change event	animationOnDataChangeChanged
Property change listener attribute (must be of type function)	on-animation-on-data-change-changed

Examples

Initialize the spark chart with the animation-on-data-change attribute specified:

<oj-spark-chart animation-on-data-change='auto'></oj-spark-chart>

Get or set the animationOnDataChange property after initialization:

// getter
var value = mySparkChart.animationOnDataChange;

// setter
mySparkChart.animationOnDataChange = "auto";

animation-on-display :string

Defines the animation that is shown on initial display.

Supported Values:

Name	Type
"auto"	string
"none"	string

Default Value:

• "none"

Names

Item	Name
Property	animationOnDisplay
Property change event	animationOnDisplayChanged
Property change listener attribute (must be of type function)	on-animation-on-display-changed

Examples

Initialize the spark chart with the animation-on-display attribute specified:

<oj-spark-chart animation-on-display='auto'></oj-spark-chart>

Get or set the animationOnDisplay property after initialization:

// getter
var value = mySparkChart.animationOnDisplay;

// setter
mySparkChart.animationOnDisplay = "auto";

area-color :string

The color of the area in area or lineWithArea spark chart.

Default Value:

• ""

Names

Item	Name
Property	areaColor
Property change event	areaColorChanged
Property change listener attribute (must be of type function)	on-area-color-changed

Examples

Initialize the spark chart with the area-color attribute specified:

<oj-spark-chart type='area' area-color='red'></oj-spark-chart>

Get or set the areaColor property after initialization:

// getter
var value = mySparkChart.areaColor;

// setter
mySparkChart.areaColor="red";

area-svg-class-name :string

The CSS style class to apply if the 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.

Default Value:

• ""

Names

Item	Name
Property	areaSvgClassName
Property change event	areaSvgClassNameChanged
Property change listener attribute (must be of type function)	on-area-svg-class-name-changed

Examples

Initialize the spark chart with the area-svg-class-name attribute specified:

<oj-spark-chart type='lineWithArea' area-svg-class-name='svgClassName'></oj-spark-chart>

Get or set the areaSvgClassName property after initialization:

// getter
var value = mySparkChart.areaSvgClassName;

// setter
mySparkChart.areaSvgClassName = "svgClassName";

area-svg-style :Object

The inline style to apply if the 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.

Default Value:

• {}

Names

Item	Name
Property	areaSvgStyle
Property change event	areaSvgStyleChanged
Property change listener attribute (must be of type function)	on-area-svg-style-changed

Examples

Initialize the spark chart with the area-svg-style attribute specified:

<oj-spark-chart type='lineWithArea' area-svg-style='{"fill":"url(someURL#filterId)"}'></oj-spark-chart>

Get or set the areaSvgStyle property after initialization:

// getter
var value = mySparkChart.areaSvgStyle;

// setter
mySparkChart.areaSvgStyle = {"fill":"url(someURL#filterId)"};

as :string

An alias for the $current context variable when referenced inside itemTemplate when using a DataProvider.

Default Value:

• ''

Names

Item	Name
Property	as
Property change event	asChanged
Property change listener attribute (must be of type function)	on-as-changed

bar-gap-ratio :number

Specifies the width of the bar gap as a ratio of the item width. The valid value is a number from 0 to 1.

Default Value:

• 0.25

Names

Item	Name
Property	barGapRatio
Property change event	barGapRatioChanged
Property change listener attribute (must be of type function)	on-bar-gap-ratio-changed

Examples

Initialize the spark chart with the bar-gap-ratio attribute specified:

<oj-spark-chart type="bar" bar-gap-ratio='0.12'></oj-spark-chart>

Get or set the barGapRatio property after initialization:

// getter
var value = mySparkChart.barGapRatio;

// setter
mySparkChart.barGapRatio = 0.12;

baseline-scaling :string

Defines whether the axis baseline starts at the minimum value of the data or at zero.

Supported Values:

Name	Type
"min"	string
"zero"	string

Default Value:

• "min"

Names

Item	Name
Property	baselineScaling
Property change event	baselineScalingChanged
Property change listener attribute (must be of type function)	on-baseline-scaling-changed

Examples

Initialize the spark chart with the baseline-scaling attribute specified:

<oj-spark-chart baseline-scaling='zero'></oj-spark-chart>

Get or set the baselineScaling property after initialization:

// getter
var value = mySparkChart.baselineScaling;

// setter
mySparkChart.baselineScaling = "zero";

color :string

The color of the data items. The default value varies based on theme.

Names

Item	Name
Property	color
Property change event	colorChanged
Property change listener attribute (must be of type function)	on-color-changed

Examples

Initialize the spark chart with the color attribute specified:

<oj-spark-chart color='rgb(35, 123, 177)'></oj-spark-chart>

Get or set the color property after initialization:

// getter
var value = mySparkChart.color;

// setter
mySparkChart.color="rgb(35, 123, 177)";

data :oj.DataProvider|null

The oj.DataProvider for the spark chart. It should provide rows where each row corresponds to a single spark chart item.

Default Value:

• null

Names

Item	Name
Property	data
Property change event	dataChanged
Property change listener attribute (must be of type function)	on-data-changed

Examples

Initialize the spark chart with the data attribute specified:

<oj-spark-chart data='[[dataProvider]]'></oj-spark-chart>

Get or set the data property after initialization:

// getter
var value = mySparkChart.data;

// setter
mySparkChart.data = dataProvider;

first-color :string

The color of the first data item.

Default Value:

• ""

Names

Item	Name
Property	firstColor
Property change event	firstColorChanged
Property change listener attribute (must be of type function)	on-first-color-changed

Examples

Initialize the spark chart with the first-color attribute specified:

<oj-spark-chart first-color='yellow'></oj-spark-chart>

Get or set the firstColor property after initialization:

// getter
var value = mySparkChart.firstColor;

// setter
mySparkChart.firstColor = "yellow";

high-color :string

The color of the data item with the greatest value.

Default Value:

• ""

Names

Item	Name
Property	highColor
Property change event	highColorChanged
Property change listener attribute (must be of type function)	on-high-color-changed

Examples

Initialize the spark chart with the high-color attribute specified:

<oj-spark-chart high-color='blue'></oj-spark-chart>

Get or set the highColor property after initialization:

// getter
var value = mySparkChart.highColor;

// setter
mySparkChart.highColor = "blue";

items :(Array.<oj.ojSparkChart.Item>|Array.<number>|Promise.<Array.<oj.ojSparkChart.Item>>|Promise.<Array.<number>>|null)

An array of objects with the following properties that defines the data for the spark chart. Also accepts a Promise for deferred data rendering.

Default Value:

• null

Names

Item	Name
Property	items
Property change event	itemsChanged
Property change listener attribute (must be of type function)	on-items-changed

Examples

Initialize the spark chart with the items attribute specified:

<oj-spark-chart type="bar" items='[{"low": 4, "high": 20, "color": "red"},
                                   {"low": 9, "high": 20, "color": "yellow"},
                                   {"low": 0, "high": 7, "color": "green"}]'>
</oj-spark-chart>

<oj-spark-chart items='[[itemsPromise]]'></oj-spark-chart>

Get or set the items property after initialization:

// Get one
var value = mySparkChart.items[0];

// Get all (The items getter always returns a Promise so there is no "get one" syntax)
var values = mySparkChart.items;

// Set all (There is no permissible "set one" syntax.)
mySparkChart.items = [{"low": 4, "high": 20, "color": "red"},
                      {"low": 9, "high": 20, "color": "yellow"},
                      {"low": 0, "high": 7, "color": "green"}];

last-color :string

The color of the last data item.

Default Value:

• ""

Names

Item	Name
Property	lastColor
Property change event	lastColorChanged
Property change listener attribute (must be of type function)	on-last-color-changed

Examples

Initialize the spark chart with the last-color attribute specified:

<oj-spark-chart last-color='red'></oj-spark-chart>

Get or set the lastColor property after initialization:

// getter
var value = mySparkChart.lastColor;

// setter
mySparkChart.lastColor = "red";

line-style :string

The line style of the data line. Only applies to line spark charts.

Supported Values:

Name	Type
"dashed"	string
"dotted"	string
"solid"	string

Default Value:

• "solid"

Names

Item	Name
Property	lineStyle
Property change event	lineStyleChanged
Property change listener attribute (must be of type function)	on-line-style-changed

Examples

Initialize the spark chart with the line-style attribute specified:

<oj-spark-chart type="line" line-style='dotted'></oj-spark-chart>

Get or set the lineStyle property after initialization:

// getter
var value = mySparkChart.lineStyle;

// setter
mySparkChart.lineStyle = "dotted";

line-type :string

The line type of the data line or area. Only applies to line and area spark charts.

Supported Values:

Name	Type
"centeredSegmented"	string
"centeredStepped"	string
"curved"	string
"none"	string
"segmented"	string
"stepped"	string
"straight"	string

Default Value:

• "straight"

Names

Item	Name
Property	lineType
Property change event	lineTypeChanged
Property change listener attribute (must be of type function)	on-line-type-changed

Examples

Initialize the spark chart with the line-type attribute specified:

<oj-spark-chart type="line" line-type='curved'></oj-spark-chart>

Get or set the lineType property after initialization:

// getter
var value = mySparkChart.lineType;

// setter
mySparkChart.lineType = "curved";

line-width :number

The width of the data line. Only applies to line spark charts.

Default Value:

• 1

Names

Item	Name
Property	lineWidth
Property change event	lineWidthChanged
Property change listener attribute (must be of type function)	on-line-width-changed

Examples

Initialize the spark chart with the line-width attribute specified:

<oj-spark-chart line-width='4'></oj-spark-chart>

Get or set the lineWidth property after initialization:

// getter
var value = mySparkChart.lineWidth;

// setter
mySparkChart.lineWidth = 4;

low-color :string

The color of the data item with the lowest value.

Default Value:

• ""

Names

Item	Name
Property	lowColor
Property change event	lowColorChanged
Property change listener attribute (must be of type function)	on-low-color-changed

Examples

Initialize the spark chart with the low-color attribute specified:

<oj-spark-chart low-color='blue'></oj-spark-chart>

Get or set the lowColor property after initialization:

// getter
var value = mySparkChart.lowColor;

// setter
mySparkChart.lowColor = "blue";

marker-shape :string

The shape of the data markers. Can take the name of a built-in shape or the svg path commands for a custom shape. Only applies to line and area spark charts.

Supported Values:

Name	Type	Argument
"auto"	string	<optional>
"circle"	string	<optional>
"diamond"	string	<optional>
"human"	string	<optional>
"plus"	string	<optional>
"square"	string	<optional>
"star"	string	<optional>
"triangleDown"	string	<optional>
"triangleUp"	string	<optional>

Default Value:

• "auto"

Names

Item	Name
Property	markerShape
Property change event	markerShapeChanged
Property change listener attribute (must be of type function)	on-marker-shape-changed

Examples

Initialize the spark chart with the marker-shape attribute specified:

<oj-spark-chart type="area" marker-shape="triangleUp"></oj-spark-chart>

Get or set the markerShape property after initialization:

// getter
var value = mySparkChart.markerShape;

// setter
mySparkChart.markerShape = "triangleUp";

marker-size :number

The size of the data markers in pixels. Only applies to line and area spark charts.

Default Value:

• 5

Names

Item	Name
Property	markerSize
Property change event	markerSizeChanged
Property change listener attribute (must be of type function)	on-marker-size-changed

Examples

Initialize the spark chart with the marker-size attribute specified:

<oj-spark-chart type="area" marker-size='15'></oj-spark-chart>

Get or set the markerSize property after initialization:

// getter
var value = mySparkChart.markerSize;

// setter
mySparkChart.markerSize = 15;

reference-objects :Array.<oj.ojSparkChart.ReferenceObject>

An array of objects with the following properties defining the reference objects associated with the y axis of the spark chart.

Default Value:

• []

Names

Item	Name
Property	referenceObjects
Property change event	referenceObjectsChanged
Property change listener attribute (must be of type function)	on-reference-objects-changed

Examples

Initialize the spark chart with the reference-objects attribute specified:

<oj-spark-chart reference-objects='[{"type": "area", "high": 10, "low": 2, "location": "front", "color": "red"},
                                    {"type": "line", "value": 9, "location": "front", "color": "yellow"},
                                    {"type": "area", "high": 10, "low": 0, "location": "back", "color": "green"}]'></oj-spark-chart>


<oj-spark-chart reference-objects='[[referencePromise]]'></oj-spark-chart>

Get or set the referenceObjects property after initialization:

// Get one
var value = mySparkChart.referenceObjects[0];

// Get all (The items getter always returns a Promise so there is no "get one" syntax)
var values = mySparkChart.referenceObjects;

// Set all (There is no permissible "set one" syntax.)
mySparkChart.referenceObjects=[{"type": "area", "high": 10, "low": 2, "location": "front", "color": "red"},
                               {"type": "line", "value": 9, "location": "front", "color": "yellow"},
                               {"type": "area", "high": 10, "low": 0, "location": "back", "color": "green"}];

svg-class-name :string

The CSS style class to apply to the data items. For type lineWithArea, this style will only be applied to the line if areaClassName is also specified. The style class and inline style will override any other styling specified through the properties. For tooltips, it's recommended to also pass a representative color to the color attribute.

Default Value:

• ""

Names

Item	Name
Property	svgClassName
Property change event	svgClassNameChanged
Property change listener attribute (must be of type function)	on-svg-class-name-changed

Examples

Initialize the spark chart with the svg-class-name attribute specified:

<oj-spark-chart svg-class-name='className'></oj-spark-chart>

Get or set the svgClassName property after initialization:

// getter
var value = mySparkChart.svgClassName;

// setter
mySparkChart.svgClassName = "className";

svg-style :Object

The inline style to apply to the data items. For type lineWithArea, this style will only be applied to the line if areaStyle is also specified. The style class and inline style will override any other styling specified through the properties. For tooltips, it's recommended to also pass a representative color to the color attribute.

Default Value:

• {}

Names

Item	Name
Property	svgStyle
Property change event	svgStyleChanged
Property change listener attribute (must be of type function)	on-svg-style-changed

Examples

Initialize the spark chart with the svg-style attribute specified:

<oj-spark-chart svg-style='{"fill":"url(someURL#filterId)"}'></oj-spark-chart>

Get or set the svgStyle property after initialization:

// getter
var value = mySparkChart.svgStyle;

// setter
mySparkChart.svgStyle = {"fill":"url(someURL#filterId)"};

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)	on-tooltip-changed

Examples

Initialize the spark chart with the tooltip attribute specified:

<oj-spark-chart tooltip.renderer='[[tooltipFun]]'></oj-spark-chart>

<oj-spark-chart tooltip='[[{"renderer": tooltipFun}]]'></oj-spark-chart>

Get or set the tooltip property after initialization:

// Get one
var value = mySparkChart.tooltip.renderer;

// Get all
var values = mySparkChart.tooltip;

// Set one, leaving the others intact. Always use the setProperty API for
// subproperties rather than setting a subproperty directly.
mySparkChart.setProperty('tooltip.renderer', tooltipFun);

// Set all. Must list every resource key, as those not listed are lost.
mySparkChart.tooltip={'renderer': tooltipFun};

tooltip.renderer :((context: oj.ojSparkChart.TooltipContext) => ({insert: Element|string}|{preventDefault: boolean}))|null

A function that returns a custom tooltip. The function takes a dataContext argument, provided by the chart, with the following properties:

• parentElement: The tooltip element. The function can directly modify or append content to this element.
• color: The color of the chart.
• componentElement: The spark chart element.

The function should return an Object that contains only one of the two 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

Example

See the tooltip attribute for usage examples.

track-resize :string

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:

Name	Type
"off"	string
"on"	string

Default Value:

• "on"

Names

Item	Name
Property	trackResize
Property change event	trackResizeChanged
Property change listener attribute (must be of type function)	on-track-resize-changed

Examples

Initialize the data visualization element with the track-resize attribute specified:

<oj-some-dvt track-resize='off'></oj-some-dvt>

Get or set the trackResize property after initialization:

// getter
var value = myComponent.trackResize;

// setter
myComponent.trackResize="off";

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)	on-translations-changed

Examples

Initialize the component, overriding some translated resources and leaving the others intact:

<!-- Using dot notation -->
<oj-some-element translations.some-key='some value' translations.some-other-key='some other value'></oj-some-element>

<!-- Using JSON notation -->
<oj-some-element translations='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-some-element>

Get or set the translations property after initialization:

// Get one
var value = myComponent.translations.someKey;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myComponent.setProperty('translations.someKey', 'some value');

// Get all
var values = myComponent.translations;

// Set all.  Must list every resource key, as those not listed are lost.
myComponent.translations = {
    someKey: 'some value',
    someOtherKey: 'some other value'
};

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

type :string

The chart type.

Supported Values:

Name	Type
"area"	string
"bar"	string
"line"	string
"lineWithArea"	string

Default Value:

• "line"

Names

Item	Name
Property	type
Property change event	typeChanged
Property change listener attribute (must be of type function)	on-type-changed

Examples

Initialize the spark chart with the type attribute specified:

<oj-spark-chart type='area'></oj-spark-chart>

Get or set the type property after initialization:

// getter
var value = mySparkChart.type;

// setter
mySparkChart.type="area";

visual-effects :string

Defines whether visual effects such as overlays are applied to the spark chart.

Supported Values:

Name	Type
"auto"	string
"none"	string

Default Value:

• "auto"

Names

Item	Name
Property	visualEffects
Property change event	visualEffectsChanged
Property change listener attribute (must be of type function)	on-visual-effects-changed

Examples

Initialize the spark chart with the visual-effects attribute specified:

<oj-spark-chart visual-effects='none'></oj-spark-chart>

Get or set the visualEffects property after initialization:

// getter
var value = mySparkChart.visualEffects;

// setter
mySparkChart.visualEffects = "none";

Methods

getDataItem(itemIndex) → {(oj.ojSparkChart.ItemContext|null)}

Returns an object with the following properties for automation testing verification of the data item with the specified item index.

Parameters:

Name	Type	Description
itemIndex	number	The item index

Properties:

Name	Type	Description
borderColor	string	The border color of the item
color	string	The color of the item
date	Date	The date (x value) of the item
high	number	The high value for a range item
low	number	The low value for a range item
value	number	The value of the item

Returns:

An object containing properties for the data item, or null if none exists.

Type

(oj.ojSparkChart.ItemContext|null)

getProperty(property) → {any}

Retrieves a value for a property or a single subproperty for complex properties.

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:

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

refresh() → {void}

Refreshes the component.

Returns:

Type

void

setProperties(properties) → {void}

Performs a batch set of properties.

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 single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.

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

Item

Properties:

Name	Type	Default	Description
borderColor	string		The default border color for the data items.
color	string		The color of the bar or marker for the data item. This override can be used to highlight important values or thresholds.
date	Date		The date for the data item. The date should only be specified if the interval between data items is irregular.
high	number		The high value for range bar/area. Define 'low' and 'high' instead of 'value' to create a range bar/area spark chart.
low	number		The low value for range bar/area. Define 'low' and 'high' instead of 'value' to create a range bar/area spark chart.
markerDisplayed	"on" | "off"	"off"	Defines whether a marker should be displayed for the data item. Only applies to line and area spark charts.
markerShape	"square" | "circle" | "diamond" | "plus" | "triangleDown" | "triangleUp" | "human" | "star" | "auto" | string	"auto"	The shape of the data markers. Can take the name of a built-in shape or the svg path commands for a custom shape. Only applies to line and area spark charts.
markerSize	number		The size of the data markers in pixels. Only applies to line and area spark charts.
svgClassName	string		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	Object		The 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.
value	number		The value of the data item.

ItemContext

Properties:

Name	Type	Description
borderColor	string	The border color of the item
color	string	The color of the item
date	Date	The date (x value) of the item
high	number	The high value for a range item
low	number	The low value for a range item
value	number	The value of the item

ReferenceObject

Properties:

Name	Type	Argument	Default	Description
color	string	<optional>		The color of the reference object.
high	number	<optional>		The high value of a reference area.
lineWidth	number	<optional>		The width of a reference line.
lineStyle	"dotted" | "dashed" | "solid"		"solid"	The line style of a reference line.
location	"front" | "back"		"back"	The location of the reference object relative to the data items.
low	number	<optional>		The low value of a reference area.
svgClassName	string	<optional>		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.
svgStyle	Object	<optional>		The inline style to apply to the reference object. The style class and inline style will override any other styling specified through the properties.
type	"area" | "line"		"line"	The type of reference object being shown.
value	number	<optional>		The value of a reference line.

TooltipContext

Properties:

Name	Type	Description
color	string	The color of the chart.
componentElement	Element	The spark chart element.
parentElement	Element	The tooltip element. The function can directly modify or append content to this element.