Element: <oj-spark-chart-item>

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

Signature:

class ojSparkChartItem

QuickNav

Attributes


Version:
  • 8.0.0
Since:
  • 5.2.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 {ojSparkChartItem} from "ojs/ojchart";

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

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.

JET Spark Chart Item

The oj-spark-chart-item element is used to declare properties for spark chart items and is only valid as the child of a template element for the itemTemplate slot of oj-spark-chart.


<oj-spark-chart data='[[dataProvider]]'>
 <template slot='itemTemplate' data-oj-as='item'>
   <oj-spark-chart-item  high='[[item.data.high]]' value='[[item.data.total]]'> </oj-spark-chart-item>
 </template>
</oj-spark-chart>

Attributes

border-color :string

The default border color for the data items.
Default Value:
  • ''

color :string

The color of the bar or marker for the data item. This override can be used to highlight important values or thresholds.
Default Value:
  • ''

date :string

The date for the data item. The date should only be specified if the interval between data items is irregular.
Default Value:
  • ''

high :number|null

The high value for range bar/area. Define 'low' and 'high' instead of 'value' to create a range bar/area spark chart.
Default Value:
  • null

low :number|null

The low value for range bar/area. Define 'low' and 'high' instead of 'value' to create a range bar/area spark chart.
Default Value:
  • null

marker-displayed :"off"|"on"

Defines whether a marker should be displayed for the data item. Only applies to line and area spark charts
Supported Values:
Value
"off"
"on"
Default Value:
  • "off"

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

marker-size :number

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

svg-class-name :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.
Default Value:
  • ''

svg-style :CSSStyleDeclaration

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.
Default Value:
  • {}

value :number|null

The value of the data item.
Default Value:
  • null