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 itspath
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
).