How can I add data labels to Horizontal stacked bar chart?

[winner106]

Hello everyone, I have been studying plot recently but have encountered some issues. I hope to get some help. Thank you very much!

I want to add three data labels to this chart, but I couldn't achieve it. The desired effect is as follows:

https://observablehq.com/d/6a287381aff76d7f

what I have tried:

thank you!

[Fil]

here's a solution:

Plot.plot({
  marginLeft: 90,
  marks: [
    Plot.barX(
      congress,
      Plot.groupY(
        { x: "count" },
        { fill: "gender", y: "party", sort: { y: "x", reverse: true } }
      )
    ),
    Plot.text(
      congress,
      Plot.stackX(
        Plot.groupY({ x: "count", text: "count" }, { z: "gender", y: "party" })
      )
    )
  ]
})

note that you need to pas the data before the options, and you need to be explicit about stacking when using the text mark (whereas the bar mark stacks implicitly).

[winner106]

Thank you so much. Can I add another total count text at the end of each bar as well?

I understand that the "transform" feature can be a bit challenging, but I really want to master it because once you get the hang of it, it can be very convenient for future use. Thank you!

[Fil]

Sure! Plot's gallery has an example https://observablehq.com/@observablehq/plot-horizontal-bar-chart-with-label