Pack

This tutorial will look at how to configure pack series.

Circles

In pack series, circles.template can be used to configure node circles. All nodes have them.

The template accepts all Circle settings.

TypeScript

series.circles.template.setAll({
  fillOpacity: 0.7,
  strokeWidth: 1,
  strokeOpacity: 1
});

JavaScript

series.circles.template.setAll({
  fillOpacity: 0.7,
  strokeWidth: 1,
  strokeOpacity: 1
});

Labels

Configuring labels

Series label configuration is done via its template, accessible via series property labels.template.

TypeScript

series.labels.template.setAll({
  fontSize: 20,
  fill: am5.color(0x550000),
  text: "{category}"
});

JavaScript

series.labels.template.setAll({
  fontSize: 20,
  fill: am5.color(0x550000),
  text: "{category}"
});

Pack series uses Label for its labels. Check out its class reference for all the possible settings.

Label content

Node labels are pre-set to display name of the node.

We can modify contents of the tooltips using text setting on a series label template:

TypeScript

series.labels.template.setAll({
  text: "{category}: [bold]{sum}[/]",
  fontSize: 14
});

JavaScript

series.labels.template.setAll({
  text: "{category}: [bold]{sum}[/]",
  fontSize: 14
});

Contents of the tooltip can include data placeholders (codes in curly brackets that will be replaced by actual data) and in-line formatting blocks (formatting instructions enclosed in square brackets).

Refer to IPackDataItem for available keys for the data placeholders.

Disabling labels

To disable series labels, we can set forceHidden setting to true in their template:

TypeScript

series.labels.template.set("forceHidden", true);

JavaScript

series.labels.template.set("forceHidden", true);

Tooltips

Nodes are pre-set to display a tooltip on hover containing name of the category and its value.

We can modify contents of the tooltips using tooltipText on rectangle’s template:

TypeScript

series.nodes.template.set("tooltipText", "{category}: [bold]{sum}[/]");

JavaScript

series.nodes.template.set("tooltipText", "{category}: [bold]{sum}[/]");

Contents of the tooltip can include data placeholders (codes in curly brackets that will be replaced by actual data) and in-line formatting blocks (formatting instructions enclosed in square brackets).

Refer to IPackDataItem for available keys for the data placeholders.

Example

Open in CodePen