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:
- Go to the editor page 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.
- 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.
- 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
NOTE: This method of using custom HTML to color text will not work if a Riley legend is enabled.
- You can even add characters like circles or squares and shade them via custom HTML. This is useful to create "fake" legends in headers or annotations. Here's an example:
<span style="color: #FFCA19; font-size: 1rem;">⬤</span> DOMESTIC AND PERSONAL SERVICE. </br> <span style="color: #B2907A; font-size: 1rem;">⬤</span> PROFESSIONS. </br> <span style="color: #E1D5C2; font-size: 1rem;">⬤</span> TRADE AND TRANSPORTATION.