Change size of text in color legend?

Community Help
1

Hi,

I am using Plot to create a scatter chart. I increased the bit the size of the axis marks etc with:

style: { fontSize: 16 }.

It looks like this:

image
image726×742 9.61 KB

This is very nice, but as you might have noticed, the size of the text in the color legend hasn’t changed? Any idea if it’s possible to change it too? I can’t seem to find a solution.

Thanks!

1 Like
2

One option, though less than ideal, is to use CSS instead of the Plot API directly. You can add a className property to the color field, which will let you target the legend. Note that the class name will have -ramp appended. You might also want to adjust the margin of the legend.

JavaScript

Plot.plot({
...
color: { className: "large-font"}
})

CSS

.large-font-ramp {
  font-size: 16px;
  margin-bottom: 20px;
}

Full example here.

4 Likes
3

Thank you!

4

I often struggle with labels in Observable. Font size of titles and legend text etc. Hope this will be prioritized in coming releases of Plot. Data science folks are used to be able to get relatively fine grained control of these things.

2 Likes
5

+1 to @matvil’s comment. It would be really nice if there was more direct support for this. Currently I’m setting style: { fontSize: "16px" }, on the whole plot but it isn’t being applied to the legend which I find surprising. The fact you can use className here isn’t reflected in the typescript declarations, too.