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.
IMPORTANT The baseline-shift used in this tutorial is being deprecated, and thus may not work in all browsers. Use with care.
Enabling
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[/] 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[/] and [baseline-shift: sub; font-size: 9px;]sub[/]."
Example
See the Pen ydZoJe by amCharts team (@amcharts) on CodePen.24419