How can I center a text label above a pair of bars?

[pelly]

I can't get a text label to appear directly centered over the two bars per category facet.

Is there a straightforward way to do this without using the dx option on the text label?

See attached image for details. Right now the label is over the second bar.

Thanks for any help!

[Fil]

Please share your code so far (ideally in an observable notebook), so we can help. It's hard to debug a jpeg :)

[pelly]

OK, so I've cleaned up my code significantly to strip it down to the bare minimum:

---
execute:
  echo: false
---

```{ojs}
//| echo: false

data = [
    {category: "Age 20-50", x: "2023-01-01", y: 100}, 
    {category: "Age 20-50", x: "2023-02-01", y: 125},
    {category: "Age 50-90", x: "2023-01-01", y: 133},
    {category: "Age 50-90", x: "2023-02-01", y: 168},
]

Plot.plot({
  x: {type: "band", nice:true},
  color: {type: "ordinal"},
  fx: {
    label: null, 
    fontSize: "18pt"
  },
  facet: {
    data: data,
    x: "category",
  },
  marks: [
    Plot.barY(data, {x: "x",  y: "y",  fill: "x"})
  ]
})

(Apologies for the inline code; I haven't figured out how to get Plot working yet in Observable)

Things I'd like:

1. Change and Enlarge the fx label font significantly
2. move the centered fx labels to ~50 px above the highest bar in each facet.

Note I'm using Observable Plot in Quarto. I just upgrade Quarto to the latest version (1.3.361).

I tried changing the axis font size of the fx label using an axisFx as described in the docs, but I got an axisFx not defined error

[pelly]

OK, after more googling around, I was able to get the latest version of Plot included into Quarto and the latest features are available:

PlotNew = require("@observablehq/plot")

data = [
    {category: "Age 20-50", x: "2023-01-01", y: 100}, 
    {category: "Age 20-50", x: "2023-02-01", y: 125},
    {category: "Age 50-90", x: "2023-01-01", y: 133},
    {category: "Age 50-90", x: "2023-02-01", y: 168},
]

PlotNew.plot({
  x: {type: "band", nice:true},
  color: {type: "ordinal"},
  fx: {
    label: null, 
    fontSize: "18pt"
  },
  facet: {
    data: data,
    x: "category",
  },
  marks: [
    PlotNew.barY(data, {x: "x",  y: "y",  fill: "x"}),
    PlotNew.axisFx({fontSize: "18pt"})
  ]
})

I'd still like to know how I can manipulate the fx label to hover just above the highest bar in a facet.

Thanks for any assistance.

[Fil]

To make Plot work on observable, create an account, then create a new notebook, and paste each statement into a different cell.

Here's a suggestion to place the category label just over the highest bar in each facet:
https://observablehq.com/@recifs/plot-facet-label-placement--support

Technically, it's not the facet label, but a text mark where we select the datum which has the highest value for y.

[mbostock]

@Fil If you remove the x: "x" it will center the label horizontally above the bars, as in the screenshot above. (I also recommend lineAnchor: "bottom" when positioning text above something, so that the dy does not need to be adjusted as much when you change the font size.)

[Fil]

Ah, I misread @pelly’s followup question, I though they wanted to position the labels above the tallest bar (in x and y), but it was probably just on y. I've also added the better lineAnchor option.

[pelly]

Thank you guys very much. This is super helpful and you taught me more understanding of Plot from these examples.