Series

A base class for all series. Series extends Component and is the foundation for all chart series types.

Properties

chart

Chart | undefined

A chart series belongs to

const chart = series.chart;

bullets

List<(root, series, dataItem) => Bullet | undefined>

List of bullets to use for the series

See Bullets for more info.

series.bullets.push((root, series, dataItem) => {
  return am5.Bullet.new(root, {
    sprite: am5.Circle.new(root, {
      radius: 5,
      fill: series.get("fill")
    })
  });
});

bulletsContainer

Container

A Container series’ bullets are stored in

Data and Display

name

string

Name of the series

valueField

string

A key to look up in data for a numeric value of the data item

customValueField

string

A key to look up in data for a numeric customValue of the data item

idField

string

A key to look up in data for an id of the data item

Legend

legendLabelText

string

A text template to be used for label in legend

legendValueText

string

A text template to be used for value label in legend

legendDataItem

DataItem<ILegendDataItem>

A data item representing series in a Legend

Animation

sequencedInterpolation

boolean

If set to true the series initial animation will be played item by item rather than all at once

See Animation of series for more info.

sequencedDelay

number

A delay in milliseconds to wait before starting animation of next data item

Styling

stroke

Color

Series stroke color

See Series colors for more info.

fill

Color

Series fill color

fillPattern

Pattern

Series fill pattern

See Patterns for more info.

Heat Rules

heatRules

Array<IHeatRule>

A list of heat rules to apply on series elements

See Heat rules for more info.

Aggregates

calculateAggregates

boolean

If set to true, series will calculate aggregate values, e.g. change percent, high, low, etc.

excludeFromAggregate

Array<string>

A list of field names to exclude from automatic aggregation when calculateAggregates is enabled

Methods

startIndex()

Returns current start index of the series.

index

number

Start index

const startIndex = series.startIndex();

endIndex()

Returns current end index of the series.

index

number

End index

const endIndex = series.endIndex();

addBullet()

Adds bullet directly to a data item.

dataItem

DataItem

required

Target data item

bullet

Bullet

required

Bullet instance (not a function)

const bullet = am5.Bullet.new(root, {
  sprite: am5.Circle.new(root, {
    radius: 5,
    fill: am5.color(0xff0000)
  })
});

series.addBullet(dataItem, bullet);

See Adding directly to data item for more info.

showDataItem()

Shows series’s data item.

dataItem

DataItem

required

Data item

duration

number

Animation duration in milliseconds

promise

Promise<void>

Promise that resolves when animation completes

await series.showDataItem(dataItem, 500);

hideDataItem()

Hides series’s data item.

dataItem

DataItem

required

Data item

duration

number

Animation duration in milliseconds

promise

Promise<void>

Promise that resolves when animation completes

await series.hideDataItem(dataItem, 500);

updateLegendValue()

Updates legend label and value for a data item.

dataItem

DataItem

Data item to update legend for

series.updateLegendValue(dataItem);

updateLegendMarker()

Updates legend marker for a data item.

dataItem

DataItem

Data item to update legend marker for

series.updateLegendMarker(dataItem);

hoverDataItem()

Triggers hover state on a data item.

dataItem

DataItem

required

Data item to hover

series.hoverDataItem(dataItem);

unhoverDataItem()

Removes hover state from a data item.

dataItem

DataItem

required

Data item to unhover

series.unhoverDataItem(dataItem);

Heat Rules

Heat rules allow you to set visual properties of series elements based on their values.

IHeatRule Interface

target

Template<any>

required

Target template

dataField

string

required

Which data field to use when determining item’s value

key

string

A setting key to set

min

any

The setting value to use for items with the lowest value

max

any

The setting value to use for items with the highest value

neutral

any

The setting value to use for items which do not have value at all

minValue

number

Custom lowest value

maxValue

number

Custom highest value

logarithmic

boolean

default:false

Use logarithmic scale when calculating intermediate setting values

customFunction

(target: Sprite, minValue: number, maxValue: number, value?: any) => void

A custom function that will set target element’s settings

Example

series.set("heatRules", [{
  target: series.columns.template,
  min: am5.color(0x00ff00),
  max: am5.color(0xff0000),
  dataField: "value",
  key: "fill"
}]);

Data Item Properties

Series data items have the following properties:

string

Data item identifier

value

number

Main numeric value

valueWorking

number

Working value (used during animations)

valueChange

number

Change from first value

valueChangePercent

number

Percent change from first value

valueChangeSelection

number

Change within current selection

valueChangeSelectionPercent

number

Percent change within current selection

valueChangePrevious

number

Change from previous value

valueChangePreviousPercent

number

Percent change from previous value

customValue

number

Custom numeric value

visible

boolean

default:true

Whether data item is visible

Examples

Creating a Series with Bullets

const series = chart.series.push(am5xy.LineSeries.new(root, {
  name: "Sales",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  categoryXField: "category"
}));

series.bullets.push((root, series, dataItem) => {
  return am5.Bullet.new(root, {
    sprite: am5.Circle.new(root, {
      radius: 5,
      fill: series.get("fill")
    })
  });
});

series.data.setAll([
  { category: "A", value: 100 },
  { category: "B", value: 200 },
  { category: "C", value: 150 }
]);

Applying Heat Rules

series.set("heatRules", [{
  target: series.columns.template,
  min: am5.color(0x0000ff),
  max: am5.color(0xff0000),
  dataField: "valueY",
  key: "fill"
}]);

Core

Shapes

Controls

XY Charts

Map Charts

Stock Charts

Hierarchy Charts

Utilities

Properties

chart

bullets

bulletsContainer

Data and Display

Legend

Animation

Styling

Heat Rules

Aggregates

Methods

startIndex()

endIndex()

addBullet()

showDataItem()

hideDataItem()

updateLegendValue()

updateLegendMarker()

hoverDataItem()

unhoverDataItem()

Heat Rules

IHeatRule Interface

Example

Data Item Properties

Examples

Creating a Series with Bullets

Applying Heat Rules

Build docs developers (and LLMs) love

Core

Shapes

Controls

XY Charts

Map Charts

Stock Charts

Hierarchy Charts

Utilities

​Properties

​chart

​bullets

​bulletsContainer

​Data and Display

​Legend

​Animation

​Styling

​Heat Rules

​Aggregates

​Methods

​startIndex()

​endIndex()

​addBullet()

​showDataItem()

​hideDataItem()

​updateLegendValue()

​updateLegendMarker()

​hoverDataItem()

​unhoverDataItem()

​Heat Rules

​IHeatRule Interface

​Example

​Data Item Properties

​Examples

​Creating a Series with Bullets

​Applying Heat Rules

Build docs developers (and LLMs) love

Properties

chart

bullets

bulletsContainer

Data and Display

Legend

Animation

Styling

Heat Rules

Aggregates

Methods

startIndex()

endIndex()

addBullet()

showDataItem()

hideDataItem()

updateLegendValue()

updateLegendMarker()

hoverDataItem()

unhoverDataItem()

Heat Rules

IHeatRule Interface

Example

Data Item Properties

Examples

Creating a Series with Bullets

Applying Heat Rules