Placing labels anywhere on the chart

This tutorial shows how you can place arbitrary labels anywhere on the chart.

Adding a label

A label is represented by object of type Label.

A chart is an instance of Container.

Therefore, to create a child element (a label) in chart (container) we will use chart's createChild(type) method:

let label = chart.createChild(am4core.Label);
label.text = "Hello world!";
label.fontSize = 20;
label.align = "center";
var label = chart.createChild(am4core.Label);
label.text = "Hello world!";
label.fontSize = 20;
label.align = "center";
{
  // ...
  "children": [{
    "type": "Label",
    "text": "Hello world!",
    "fontSize": 20,
    "align": "center"
  }]
}

See the Pen amCharts V4: Label placement (1) by amCharts (@amcharts) on CodePen.24419

Setting absolute position

As you can see, the chart, being a container, has automatically divided available space between the plot area and our new label.

That's not what we want. We want the label to go over plot area.

For that, we're going to use property isMeasured available on all elements, including Label.

If we set it to false, the chart (container) takes such element out of the land grab, and places it absolutely based on elements x and y values.

Let's update our example from before, with absolute positioning:

let label = chart.createChild(am4core.Label);
label.text = "Hello world!";
label.fontSize = 20;
label.align = "center";
label.isMeasured = false;
label.x = 70;
label.y = 20;
var label = chart.createChild(am4core.Label);
label.text = "Hello world!";
label.fontSize = 20;
label.align = "center";
label.isMeasured = false;
label.x = 70;
label.y = 20;
{
  // ...
  "children": [{
    "type": "Label",
    "text": "Hello world!",
    "fontSize": 20,
    "align": "center",
    "isMeasured": falsem
    "x": 70,
    "y": 20
  }]
}

And re-check how it affects label placement on a live example:

See the Pen amCharts V4: Label placement (2) by amCharts (@amcharts) on CodePen.24419

Excellent! Now the label obeys our x and y settings, and places the label absolutely over the whole plot area.

You'll also notice the plot area now takes up the whole of the chart area, since the chart does not reserve a place to accommodate the label anymore.

Centering / relative positioning

An absolutely-positioned elements, will not respect the align = "center" anymore. Or, more precisely, they will, but since their not part of the container's layout anymore, they don't have anything to center in relation with. Just like with absolutely-positioned HTML elements.

So, if we'd like to position our label centered, we'll need to use it's x and y properties.

In previous examples we used absolute pixel values. However, they can also accept relative values, as well.

Relative values in amCharts 4 are represented by Percent objects:

label.x = am4core.percent(50);
label.x = am4core.percent(50);
{
  // ...
  "children": [{
    "type": "Label",
    // ...
    "x": "50%"
  }]
}

Furthermore, all elements are positioned using their upper-left corner by default.

With the above, the upper-left corner of our label will be placed at exact middle of the chart area, which will make our label look off-set to the right.

To fix that, we'll make our label element center around it's actual horizontal center, using its horizontalCenter property:

label.x = am4core.percent(50);
label.horizontalCenter = "middle";
label.x = am4core.percent(50);
label.horizontalCenter = "middle";
{
  // ...
  "children": [{
    "type": "Label",
    // ...
    "x": "50%",
    "horizontalCenter": "middle"
  }]
}

And, voilà!

See the Pen amCharts V4: Label placement (3) by amCharts (@amcharts) on CodePen.24419

Adding chart title or bottom text

This tutorial dealt with labels placed in the chart area, which do not affect chart layout itself.

If you would like to add a chart title, or bottom text, that automatically adjust the chart itself to accommodate left space, please refer to the following tutorial: