Search code examples
d3.jsobservablehq

Change the font-size and color of the labels on the axes/ticks in D3 Observable (no text appended)

I am using this Bar Chart on D3 Observable. I need to change the font-size and color of the labels on the axes/ticks. In the previous D3 approach you could simply do this in CSS like: 

text {
    fill : white;
    font-size : 22px;
}

But Observable doesn't provide the usual HTML file for placing CSS.

If you look at the file there doesn't appear to be any text appended, although in inspect element you can see the labels are indeed "text"

I tried adding style to the appended g:

svg.append("g")
  .style("fill", "white")
  .call(xAxis);

But to no avail.

Solution

  • In an Observable notebook you can add your CSS using the html method with a template literal, like this:

    html`<style>
  text {
    fill : white;
    font-size : 22px;
}
  </style>`

    Just create a new cell (clicking the + sign) and copy/paste the snippet above.