Label font size

1

I’m getting started embedding some Observable Viz on the web, but I find that my label font size is weirdly small, and I don’t know how to control it via CSS. Anybody have suggestions?

Thanks.

2

Many Observable charts are SVG elements made with D3. To change the size of labels with CSS, you can style the text element of the label directly with .style() or give it a class name using .classed().

If you give a link to an example notebook you’re trying to embed, we could probably give more specific directions.

1 Like
3

Hi bgchen,

I’m working with these right now, specifically:

Thanks.

4

All of these set the font-size on the SVG element itself. The easiest way to override it globally is to add a cell with the following content to your notebook:

html`<style>svg { font-size: 12px !important }`

Alternatively you can modify the style property on the element before displaying it:

chart.style.fontSize = '12px', chart

A third option would be to wrap the chart:

html`<div class="custom">${chart}<style>
.custom svg { font-size: 12px !important }
`
1 Like
5

Gratitude!

I modified your advice a little bit by adding this to my css:

.chart svg { 
    font-size: 0.9em !important;
}

Now what I’m wondering is if there is a hierarchy of text “styles” in the labels of an SVG that I could somehow target, or does “font-size” have to control all the labeling?

Thanks.

6

Standard CSS will work. If selecting elements by their tag name or path doesn’t suffice you’ll have to add custom classes.

7

I know enough CSS for that, but what I don’t know is the structure of SVGs and how to pinpoint elements. Taking this as a stock example…

…I see this line near the top…

.style("font", "10px sans-serif");

…that clearly indicates font styling, but I don’t understand the significance of “tag name or path,” nor how to “add custom classes.”

Could you offer a concrete example or two?

Thanks.

8

Perhaps you could explain which changes you are trying to make?

9

A different example might be better. In this chart…

…I can imagine wanting to use slightly larger, bold-face text for each cell’s primarily label, and then use smaller roman text for descriptions or quant about market size, value, etc., as a simple example.

10

If you look at the chart code you can see three occurences of cell.append("text"). These are the places where you’ll want to apply your changes, e.g. by altering the existing values.

Note that changes to font-size may require adjustments to the y position of the respective text labels. You may also want to set a different alignment-baseline for each text element.