How to color parts of your text with custom HTML

With custom HTML, you are able to customize singular words or highlight phrases to make them stand out. Here is how:

1
Go to the Preview tab of your visualization and scroll down to either where you want to change the color of the text or highlight a phrase. Custom HTML can be used to change the color of the text wherever custom HTML is allowed. In Flourish, that is the case in the header, footer and popups, as well as in annotations.
2
Pick the word or phrase that you would like to make a different color. We will wrap this line of code around this word to change the color:

Interest rates have been falling since the financial crisis, and have even gone <span style="color: #ff4136">negative</span> in some countries
	

TIP: If editing the color of a word or phrase in a text box for the header or footer, we recommend using a code editor or a word editor to do these edits, since the text box is relatively small and can be fiddly.

3
If you want to highlight a phrase or word, wrap it in a similar line of code:

About 30 percent of <span style="background-color: #0090a3; color: white;">Israelis</span> had received at least one dose of a coronavirus vaccine by mid-January
	

WARNING: This method of using custom HTML to color text will not work if a Riley legend is enabled. If you would like to use custom HTML in the Line, bar, pie and Scatter plot templates, make sure that the Legend > Add data colors to header text option is turned off.