Using superscript and subscript in labels

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[/]."


See the Pen ydZoJe by amCharts team (@amcharts) on CodePen.24419