This short tutorial will show how you can make parts of any label super- or sub-script using amCharts 4's in-line text formatting syntax.
PREREQUISITE If you don't know how square bracket text formatting works, make sure you read the "Visual formatting" section in our Text formatting article.
Basically, a square bracket blocks in any text will give text formatter instructions, on how to to change subsequent text. It can be used to set font weight and color for example:
"The following text is [bold #f00]bold and red[/]".
However, it's not limited to just that. Basically, you can add any SVG-compatible CSS directive as a key/value pair:
"This text is [font-size: 30px]huge[/]".
This brings us to the original purpose of this article: making super/sub-script text.
Since we already know that we can use any CSS, we can use
baseline-shift directive. E.g.:
"We can do [baseline-shift: super]super[/b] and [baseline-shift: sub]sub[/].".
And, best of all, we can combine a number of directives - just like in normal CSS - to make super/-sub-scripted text smaller:
"We can do [baseline-shift: super; font-size: 9px;]super[/b] and [baseline-shift: sub; font-size: 9px;]sub[/]."