Axis headers

Axis header is a container attached to each axis that can be used to put any additional stuff in it: title labels, legend, or anything else.

Header content

Each axis has a header container pre-created. It’s accessible via axis’ property axisHeader.

By default, it contains no content, so is essentially invisible.

To put content into it, we can push new elements into its children list:

TypeScript

yAxis.axisHeader.children.push(am5.Label.new(root, {
  text: "Volume",
  fontWeight: "500"
}));

JavaScript

yAxis.axisHeader.children.push(am5.Label.new(root, {
  text: "Volume",
  fontWeight: "500"
}));

The above will add a label on top of the plot area the axis represents.

Legend in header

Since header is a full-fledged container, it can contain absolutely any element.

It’s also a good place for a legend:

TypeScript

var legend = yAxis.axisHeader.children.push(am5.Legend.new(root, {}));
legend.data.setAll(chart.series.values);

JavaScript

var legend = yAxis.axisHeader.children.push(am5.Legend.new(root, {}));
legend.data.setAll(chart.series.values);

Open in CodePen

Header background

Axis header automatically has its background set to a Rectangle using default background (e.g. white).

The background does the job of obstructing X axis grid.

Should we need to change color, opacity, or disable the background altogether, we can do it by configuring background rectangle:

TypeScript

yAxis.axisHeader.get("background").setAll({
  fill: am5.color(0x000000),
  fillOpacity: 0.2
});

JavaScript

yAxis.axisHeader.get("background").setAll({
  fill: am5.color(0x000000),
  fillOpacity: 0.2
});