Documentation

Using curved labels

In amCharts 4 any SVG label can follow any curve. This tutorial will explain how it works and how you can spice up the look of your charts in various situations, using curved labels.

The basics

All text labels in amCharts 4 are represented by an object of type Label.

To make a label follow a curve you set Label's path and locationOnPath properties.

path can be a string representation of an SVG path.

locationOnPath is a number from 0 to 1 indicating label's position within path. 0 means the beginning, 1 - the end, and any number in-between relative position within path itself.

Using on basic shapes

Setting label on a path

Let's start with something basic. A plain container with two elements:

  • A Sprite with its path set to a simple wave: "M0 0 C 50 100, 350 -100, 400 0".
  • A Label.

Here's our test "chart" in action.

See the Pen amCharts 4: Curved text by amCharts team (@amcharts) on CodePen.

Now, to make the text follow the line, all we need to do is to set path of the label to the same path with are using for the line.

label.path = line.path;
label.path = line.path;
{
  // ...
  "children": [{
    "type": "Label",
    // ...
    "path": "M0 0 C 50 100, 350 -100, 400 0"
  }]
}

Technically, we don't even need the line element at all. It's just there for a visual clue. We can set label's path to an SVG path directly.

label.path = "M0 0 C 50 100, 350 -100, 400 0";
label.path = "M0 0 C 50 100, 350 -100, 400 0";
{
  // ...
  "children": [{
    "type": "Label",
    // ...
    "path": "M0 0 C 50 100, 350 -100, 400 0"
  }]
}

See the Pen amCharts 4: Curved text by amCharts team (@amcharts) on CodePen.

IMPORTANT Setting label's path will make the text follow that path. However, it won't move the label itself. You still need to position it using normal means of positioning if you want it to be adjacent to some visual path element, like our curve in above example.

Positioning label

By default, the beginning of the is used to start the curve of the text.

We can control the starting point using label's locationOnPath property.

0 (default) means beginning, 0.5 - middle, and 1 - end.

Since any portion of the text that does not fit into the path will be cut off, setting location to 1 does not make a lot of sense, since no text will show (it will all be beyond the end of the path and thus invisible).

So, to re-iterate, if we want to set the label 30% away from the beginning of the path, we'll do this:

label.path = "M0 0 C 50 100, 350 -100, 400 0";
label.locationOnPath = 0.3;
label.path = "M0 0 C 50 100, 350 -100, 400 0";
label.locationOnPath = 0.3;
{
  // ...
  "children": [{
    "type": "Label",
    // ...
    "path": "M0 0 C 50 100, 350 -100, 400 0",
    "locationOnPath": 0.3
  }]
}

Go ahead, play around with the slider on the below demo.

See the Pen amCharts 4: Curved text by amCharts team (@amcharts) on CodePen.

Caveats

There always are some.

Inline formatting

Due to limitations of SVG path-to-text application, in-line formatting of the text won't work.

HTML labels

Unfortunately, this feature is available on SVG elements only. it won't work for HTML labels (with html property set, not text).

Related content