Observable Plot: place a legend at the bottom of a chart.

[hmasson]

Hello, I’m starting to learn how to use Observable Plot and currently having issues in how to place a legend at the bottom of a chart. Have made a few attempts trying different options but have not been able to move it from the top. Thanks in advance!

[Cobus]

This looks like a similar request with a possible solution.

legend placement options

I didn’t see anything about moving plot legend location in the documentation either. You can move the plot legend to the right easily enough with the CSS float property. I think it’s easier to move the legend below the plot by switching their positions in the output. You can accomplish that with the following code in a separate cell: move = { d3.select(plot) .select("div") .raise() // Places swatch below the plot .style("float", "right"); // Floats the swatch on the right. } Here…

[hmasson]

Thank you so much for your help and quick reply!!!