Element: <oj-spark-chart-item>

Attributes

border-color :string

The default border color for the data items.

Default Value:

• ''

Example

Initialize the spark chart item with the border-color attribute specified:

<oj-spark-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-spark-chart-item border-color='[[item.data.borderColor]]'> </oj-spark-chart-item>
 </template>
</oj-spark-chart>

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:

• ''

Example

Initialize the spark chart item with the color attribute specified:

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

date :string

The date for the data item. The date should only be specified if the interval between data items is irregular.

Default Value:

• ''

Example

Initialize the spark chart item with the date attribute specified:

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

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

Example

Initialize the spark chart item with the high attribute specified:

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

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

Example

Initialize the spark chart item with the low attribute specified:

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

marker-displayed :string

Defines whether a marker should be displayed for the data item. Only applies to line and area spark charts

Supported Values:

Name	Type
"off"	string
"on"	string

Default Value:

• "off"

Example

Initialize the spark chart item with the marker-displayed attribute specified:

<oj-spark-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-spark-chart-item marker-displayed='[[item.data.markerDisplayed]]'> </oj-spark-chart-item>
 </template>
</oj-spark-chart>

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"

Example

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

<oj-spark-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-spark-chart-item marker-shape='[[item.data.markerShape]]'> </oj-spark-chart-item>
 </template>
</oj-spark-chart>

marker-size :number

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

Default Value:

• 5

Example

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

<oj-spark-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-spark-chart-item marker-size='[[item.data.markerSize]]'> </oj-spark-chart-item>
 </template>
</oj-spark-chart>

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:

• ''

Example

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

<oj-spark-chart data='[[dataProvider]]'  as='item'>
 <template slot='itemTemplate'>
   <oj-spark-chart-item svg-class-name='[[item.data.svgClassName]]'> </oj-spark-chart-item>
 </template>
</oj-spark-chart>

svg-style :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.

Default Value:

• {}

Example

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

<oj-spark-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-spark-chart-item svg-style='[[item.data.svgStyle]]'> </oj-spark-chart-item>
 </template>
</oj-spark-chart>

value :number|null

The value of the data item.

Default Value:

• null

Example

Initialize the spark chart item with the value attribute specified:

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