Style a Plot in a Quarto Presentation

Because sometimes the default settings are not enough.

So far, you’ve learned how to style a table in your Quarto slides. In this post, I show you how to style a plot in case you need to resize it or place it somewhere specific on a slide.

As a reminder, the numbers I’m using in examples throughout this series are based on ⚽️ MLS match predictions. I’m playing with different models to predict the goal difference in each match. On the plots below, a positive goal difference means the home team is expected to win. Do you want to learn more about this model and its predictions? Let me know in the comments!

---

Adding plots to your Quarto slides is pretty easy. The default display of a plot centers the image and it makes it cover most of a slide. In the example below, I rendered a slide with a custom ggplot , but you could use many other packages or languages to render a plot in Quarto.

The plot prints really well! But what if you want to change the position or size?

Change the Position of Your Plot

Let’s say you need to add a text box on the left side of the slide to go along with the plot. Then, you need to push the plot to the right side. We can reuse code from our table containers to change the position of the plot:

.plot-grid {
  position: relative;
  top: 10px;
  left: 250px;
}

Here, we are just defining the position of the container in the slide. To push the plot to the right, we add more pixels to the left argument. A larger number in pixels or inches in the top and left arguments will move your plot away from the top and left margins.

Add a Background To Your Plot

Let’s say you need to define a bit more the area of the plot in your slide. Again, we can reuse code from the table containers. First, you can create another container that will act as a wrapper (imagine candy wrapper 🍬) for plot-grid :

.plot-background {
  position: relative;
  top: 40px;
  left: 0px;
  background-color: #eeeeee;
  border-radius: 25px;
}

.plot-grid {
  position: relative;
  top: 10px;
  left: 40px;
}

Now plot-background defines the overall position of the plot in the slide. And we are adding a background color as an example. Then, plot-grid defines the position of the plot inside plot-background . The top and left arguments define how much is the plot pushed down and to the right from the plot-background margins.

As usual, my recommendation to you is Go for it. Try things even if the overall design doesn’t look great. The more you experiment with Sass to style elements in your Quarto presentation, the more confident you will feel when approaching a more complicated project. All you learn practicing with presentations can then be applied to creating docs and dashboards.

Was this post useful? Let me know in the comments and share it with anyone who’s getting started with Quarto.

Coming up in this series: printing to PDF and much more!