Adding chart titles and bottom text

This short tutorial shows how you can add arbitrary text labels to the top or bottom of the chart, that will automatically adjust the size of the chart itself.

Adding chart titles

For chart titles, every chart instance has a titles property which holds a list template of Label objects.

To create new title object, we just need to call its create() method. It returns a Label instance we can use to configure the title.

let title = chart.titles.create();
title.text = "Speed";
title.fontSize = 25;
title.marginBottom = 30;

var title = chart.titles.create();
title.text = "Speed";
title.fontSize = 25;
title.marginBottom = 30;

{
  // ...
  "titles": [{
    "text": "Speed",
    "fontSize": 25,
    "marginBottom": 30
  }]
}

TIP If we have several titles, we could configure chart.titles.template instead, so that each instance, created by create() is already pre-configured.

Adding bottom labels

To add a Label at the bottom of the chart, we’re going to create a child in the chart’s chartContainer using its createChild(type) method:

let label = chart.chartContainer.createChild(am4core.Label);
label.text = "Km / h";
label.align = "center";

var label = chart.chartContainer.createChild(am4core.Label);
label.text = "Km / h";
label.align = "center";

{
  // ...
  "chartContainer": {
    "children": [{
      "type": "Label",
      "text": "Km / h",
      "align": "center
    }]
  }
}

MORE INFO For more information on chart built-in containers, visit “Pre-defined chart containers”.

Full example

Here’s how it turned out:

Open in CodePen

Adding multiple labels to the top of the chart

Since amCharts 4 supports nested containers, we can implement all kinds of clever scenarios with label placement.

Let’s say we want to add a label on top of a vertical Value axis, as well as right-aligned date range indicator.

We already know how to add labels directly to chartContainer. However, we can add anther Container and then add multiple labels to it.

In the following code we’ll:

1. Add a Container;
2. Move it to top;
3. Add two labels to it: one left-aligned and pad positioned, the other right-aligned.

let topContainer = chart.chartContainer.createChild(am4core.Container);
topContainer.layout = "absolute";
topContainer.toBack();
topContainer.paddingBottom = 15;
topContainer.width = am4core.percent(100);

let axisTitle = topContainer.createChild(am4core.Label);
axisTitle.text = "Value";
axisTitle.fontWeight = 600;
axisTitle.align = "left";
axisTitle.paddingLeft = 10;

let dateTitle = topContainer.createChild(am4core.Label);
dateTitle.text = "January 1st, 2018 -- March 31st, 2018";
dateTitle.fontWeight = 600;
dateTitle.align = "right";

var topContainer = chart.chartContainer.createChild(am4core.Container);
topContainer.layout = "absolute";
topContainer.toBack();
topContainer.paddingBottom = 15;
topContainer.width = am4core.percent(100);

var axisTitle = topContainer.createChild(am4core.Label);
axisTitle.text = "Value";
axisTitle.fontWeight = 600;
axisTitle.align = "left";
axisTitle.paddingLeft = 10;

var dateTitle = topContainer.createChild(am4core.Label);
dateTitle.text = "January 1st, 2018 -- March 31st, 2018";
dateTitle.fontWeight = 600;
dateTitle.align = "right";

{
  // ...
  "chartContainer": {
    "children": [{
      "type": "Container",
      "layout": "absolute",
      "paddingBottom": 15,
      "callback": function() {
        this.toBack();
      },
      "children": [{
        "type": "Label",
        "text": "Value",
        "fontWeight": 600,
        "align": "left",
        "paddingLeft": 10
      }, {
        "type": "Label",
        "text": "January 1st, 2018 -- March 31st, 2018",
        "fontWeight": 600,
        "align": "right"
      }]
    }]
  }
}

Open in CodePen

Placing labels anywhere on the chart

So far we have shown you how to place labels on top and bottom of the chart, which will affect the chart itself since it will resize to accommodate the space.

To place labels anywhere on the chart that do not affect the layout, please follow this article:

• Placing labels anywhere on the chart