Center the legend

Hi everyone,

Is it possible to center a legend that is being called in the color option? For example, the following minimum example would place a legend outside of the chart in the top left corner. What I really want is that outside-the-chart placement as normal but for the legend to be centered.

From my research on this site, it’s likely I’ll need to find some CSS-based approach to this. Let me know!

  marks: [
      x: x,
      y: y,
      fill: fill
  color: {
    legend: true

You could try:

.plot-swatches {
  text-align: center;
  display: block;

Thanks a bunch for the tip. I used the inspector and found that with Quarto, the following custom CSS worked for all legends in my Quarto Web Book:

.plot-d6a7b5-swatches-wrap {
  justify-content: center;
1 Like