Center the legend

New To Observable
1

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!

Plot.plot({
  marks: [
    Plot.barY(data,{
      x: x,
      y: y,
      fill: fill
    })
  ],
  
  color: {
    legend: true
  }
})
2

You could try:

<style>
.plot-swatches {
  text-align: center;
  display: block;
}
</style>
3

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