3MW (Colorize single words in your plot titles)

Author

Albert Rapp
July 12, 2023

Guten Tag!

Many greetings from Ulm, Germany. As always, a short announcement before we dive into this week’s newsletter:

I’ve released another YouTube video last week. It shows you how to style your Quarto documents without knowing HTML & CSS. Check it out if you’re interested in styling your Quarto outputs. Part 2 will be released on Saturday.

Now, today I’m going to show you how you can colorize single works in your plot titles. This is a great way to remove a bulky legend and give your data more room instead. Here’s an example.

(As always, this week’s code can be found on GitHub.)

A standard example

In order to show you how to create the above image, let us create a standard plot without any color in the titles first. The code for this looks like this. Feel free to ignore any parts of this, you’re unfamiliar with.

As promised, this will give us a traditional look (using a legend).

Instructions for colored words

Ok, so’ve got a basic plot. Time to add color instructions into the title. And the way to do that is to use HTML span-tags that are wrapped around the targeted words like so.

Similar to what you may know from Markdown, these span-tags are HTML notation for using the wrapped part as an inline text. So in principle, adding them should change nothing. But as you can see, it does have an impact:

Enable HTML notation

The problem is that {ggplot2} does not know that you want to use HTML notation. So you have to enable that. This is where element_markdown() from the {ggtext} package comes into play.

You see, we can use element_markdown() in our theme() function and set, say, plot.subtitle to element_markdown() as opposed to element_text() which we’d normally use.

This will render the span-tags instead of displaying them as text:

Add color instructions

Now that we can use span-tags, we can change their style and set it to a specific color. The HTML code for this is very simple. It’s style=”color: …;". Of course, you will have to replace color with a hex-code or known CSS color name. (Watch out: These are often not the same color names that R knows)

Finally, this will give you the desired output.

Make the text bold

You might think that you can use all the fancy stuff from HTML in ggplot now. This would be cool but unfortunately {ggtext} does not implement all the styles from HTML.

For example, you cannot use font-weight: bold (like in HTML) to make the words bold. This is not implemented. Thankfully, for this specific use case, you can use the Markdown notation using **

This way, your words will stand our a bit more.

Clean up your code

You may have noticed that it is very messy to throw all the span-tags into the subtitle argument of labs(). Also, manually setting the hex-codes in the span-tags is just an invitation to using the wrong color for one of the penguin species.

So instead, I like to use the glue() function from the {glue} package to assemble the subtitle text with code and save it into a variable. Then, one can use that variable in labs(). To me, this is a much safer approach.

That’s it for today. Hope you’ve enjoyed this week’s newsletter. If you want to reach out to me, just reply to this mail or find me on Twitter.

See next week,
Albert 👋

If you like my content, you may also enjoy these:

Reply

or to participate.