Element: <oj-spark-chart-item>

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

Since:
  • 5.2.0
Module:
  • ojchart

QuickNav

Attributes


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>


Usage

Signature:

interface SparkChartItemElement

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

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

For additional information visit:


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 Description
off Marker will not be displayed.
on Marker will be displayed.
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 :Partial<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. Only SVG CSS style properties are supported.
Default Value:
  • {}

value :number|null

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